# CKE Egzamin Zawodowy INF.03 — Bazy danych SQL (MySQL/MariaDB), PHP, JavaScript (DOM), HTML5 i CSS3

> 32 pytania z kwalifikacji zawodowej INF.03 (Tworzenie i administrowanie stronami i aplikacjami internetowymi oraz bazami danych): semantyczny HTML5, formularze, kaskadowe arkusze stylów CSS3 (specyficzność, Box Model, Flexbox, Grid, RWD), programowanie klienckie w JavaScript (DOM, zdarzenia, obiekt Math), programowanie serwerowe w PHP (mysqli/PDO, sesje, ciasteczka, obsługa plików, bezpieczeństwo SQL Injection/XSS/CSRF, WCAG 2.1) oraz relacyjne bazy danych MySQL/MariaDB (SELECT, JOIN, GROUP BY, HAVING, DDL/DML/DCL i normalizacja 1NF–3NF).

- **Canonical URL:** https://flashcards.world/flashcards/sets/ed2b8431-5bbc-47ce-a34c-2dcfb34cc5da/
- **Markdown URL:** https://flashcards.world/flashcards/sets/ed2b8431-5bbc-47ce-a34c-2dcfb34cc5da.md
- **Level:** intermediate
- **Languages:** pl → pl
- **Total Cards:** 32

## Flashcards (32 Cards)

| # | Front (Term / Prompt) | Back (Definition / Answer) | Example | Multiple-Choice Options |
| :--- | :--- | :--- | :--- | :--- |
| 1 | Jak działa model pudełkowy (Box Model) w CSS3 i czym różni się właściwość `box-sizing: content-box` (domyślna) od `box-sizing: border-box`? | Na model pudełkowy elementu składają się od środka: zawartość (`content`: `width` × `height`), dopełnienie wewnętrzne (`padding` — odstęp między treścią a obramowaniem, przyjmuje tło elementu), obramowanie (`border`) oraz margines zewnętrzny (`margin` — przezroczysty odstęp od sąsiednich elementów). W domyślnym `content-box` podana szerokość `width` dotyczy samej treści (całkowita szerokość to `width + padding + border`), natomiast w `border-box` właściwości `padding` i `border` są wliczane do zadeklarowanego `width`. | Skrócony zapis `margin` / `padding`: 1 wartość = wszystkie strony; 2 wartości (`10px 20px`) = `góra/dół` oraz `lewo/prawo` (np. `margin: 0 auto` centruje blok o zadanej szerokości w poziomie!); 4 wartości = zgodnie z ruchem wskazówek zegara: `góra prawo dół lewo`. | A) Padding to zewnętrzny przezroczysty odstęp od sąsiednich bloków, a margin to odstęp wewnętrzny przyjmujący kolor tła; B) Zapis margin: 10px 20px ustawia 10px z lewej i prawej strony oraz 20px z góry i z dołu; C) Właściwość margin: auto wyśrodkowuje tekst wewnątrz akapitu zamiast właściwości text-align: center; D) Na model pudełkowy elementu składają się od środka: zawartość (`content`: `width` × `height`), dopełnienie wewnętrzne (`padding` — odstęp między treścią a obramowaniem, przyjmuje tło elementu), obramowanie (`border`) oraz margines zewnętrzny (`margin` — przezroczysty odstęp od sąsiednich elementów). W domyślnym `content-box` podana szerokość `width` dotyczy samej treści (całkowita szerokość to `width + padding + border`), natomiast w `border-box` właściwości `padding` i `border` są wliczane do zadeklarowanego `width`. ✓ |
| 2 | Jak w SQL (`CREATE TABLE` oraz `ALTER TABLE`) definiuje się klucz główny (`PRIMARY KEY` z `AUTO_INCREMENT`), klucz obcy (`FOREIGN KEY ... REFERENCES ...`) oraz więzy integralności (`NOT NULL`, `UNIQUE`, `DEFAULT`, `CHECK`)? | W `CREATE TABLE`: `id INT UNSIGNED AUTO_INCREMENT PRIMARY KEY`, `email VARCHAR(100) NOT NULL UNIQUE`, `aktywny BOOLEAN DEFAULT 1`, a klucz obcy: `klient_id INT UNSIGNED, FOREIGN KEY (klient_id) REFERENCES klienci(id) ON DELETE CASCADE`. Modyfikacja istniejącej tabeli przez `ALTER TABLE`: dodanie kolumny `ALTER TABLE towary ADD COLUMN rabat INT DEFAULT 0;`, zmiana typu `ALTER TABLE towary MODIFY COLUMN nazwa VARCHAR(150) NOT NULL;`, usunięcie kolumny `ALTER TABLE towary DROP COLUMN rabat;`. | Klucz główny (`PRIMARY KEY`) jednoznacznie identyfikuje każdy wiersz tabeli, może być tylko jeden w tabeli (choć może składać się z kilku kolumn jako klucz złożony) i z definicji wymusza `NOT NULL` oraz `UNIQUE`. Natomiast kluczy kandydujących `UNIQUE` w tabeli może być wiele i dopuszczają one wartość `NULL`. | A) Nową kolumnę do istniejącej tabeli dodaje się poleceniem UPDATE TABLE towary INSERT COLUMN rabat INT; B) W jednej tabeli może istnieć wiele kluczy głównych PRIMARY KEY, ale tylko jeden klucz UNIQUE; C) W `CREATE TABLE`: `id INT UNSIGNED AUTO_INCREMENT PRIMARY KEY`, `email VARCHAR(100) NOT NULL UNIQUE`, `aktywny BOOLEAN DEFAULT 1`, a klucz obcy: `klient_id INT UNSIGNED, FOREIGN KEY (klient_id) REFERENCES klienci(id) ON DELETE CASCADE`. Modyfikacja istniejącej tabeli przez `ALTER TABLE`: dodanie kolumny `ALTER TABLE towary ADD COLUMN rabat INT DEFAULT 0;`, zmiana typu `ALTER TABLE towary MODIFY COLUMN nazwa VARCHAR(150) NOT NULL;`, usunięcie kolumny `ALTER TABLE towary DROP COLUMN rabat;`. ✓; D) Kolumna z ograniczeniem PRIMARY KEY może przyjmować wartość NULL, jeśli nie ma ustawionego AUTO_INCREMENT |
| 3 | Jaka jest obowiązkowa kolejność klauzul w zapytaniu `SELECT` w języku SQL i czym różni się filtrowanie w klauzuli `WHERE` od filtrowania w klauzuli `HAVING`? | Obowiązkowa kolejność klauzul w składni SQL to: `SELECT ... FROM ... JOIN ... ON ... WHERE ... GROUP BY ... HAVING ... ORDER BY ... LIMIT ...`. Klauzula **`WHERE`** filtruje pojedyncze wiersze **PRZED** grupowaniem i nie może zawierać funkcji agregujących (`COUNT`, `SUM`, `AVG`, `MIN`, `MAX`), natomiast klauzula **`HAVING`** filtruje już zagregowane grupy **PO** wykonaniu `GROUP BY` i pozwala na warunki z funkcjami agregującymi (np. `HAVING COUNT(*) > 5` lub `HAVING AVG(cena) >= 100`). | Domyślnym kierunkiem sortowania w `ORDER BY kolumna` jest porządek rosnący (**`ASC`**); aby posortować malejąco, należy jawnie dopisać słowo kluczowe **`DESC`**. | A) Kolejność to SELECT -> FROM -> GROUP BY -> WHERE -> HAVING -> ORDER BY, a w WHERE można używać funkcji COUNT() i AVG(); B) Klauzula HAVING może być używana zamiast WHERE do filtrowania wierszy przed połączeniem tabel JOIN; C) Obowiązkowa kolejność klauzul w składni SQL to: `SELECT ... FROM ... JOIN ... ON ... WHERE ... GROUP BY ... HAVING ... ORDER BY ... LIMIT ...`. Klauzula **`WHERE`** filtruje pojedyncze wiersze **PRZED** grupowaniem i nie może zawierać funkcji agregujących (`COUNT`, `SUM`, `AVG`, `MIN`, `MAX`), natomiast klauzula **`HAVING`** filtruje już zagregowane grupy **PO** wykonaniu `GROUP BY` i pozwala na warunki z funkcjami agregującymi (np. `HAVING COUNT(*) > 5` lub `HAVING AVG(cena) >= 100`). ✓; D) Domyślnym porządkiem sortowania w klauzuli ORDER BY jest porządek malejący (DESC) |
| 4 | Jakie jest działanie i składnia instrukcji `INSERT INTO`, `UPDATE` oraz `DELETE` w języku SQL i co się stanie w przypadku pominięcia klauzuli `WHERE` w `UPDATE` lub `DELETE`? | Dodawanie wiersza: `INSERT INTO tabela (kol1, kol2) VALUES ('wart1', 10);`. Aktualizacja wierszy: `UPDATE tabela SET kol1 = 'nowa', kol2 = kol2 + 1 WHERE id = 5;`. Usuwanie wierszy: `DELETE FROM tabela WHERE id = 5;`. Pominięcie klauzuli `WHERE` w poleceniu `UPDATE` spowoduje nadpisanie wartości we **WSZYSTKICH wierszach tabeli**, a pominięcie `WHERE` w poleceniu `DELETE FROM tabela;` usunie **wszystkie wiersze z tabeli**! | Częsty błąd składniowy w SQL: w poleceniu `DELETE FROM tabela WHERE ...` NIE pisze się gwiazdki `*` po słowie `DELETE`! Ponadto `DELETE FROM tabela` usuwa wiersze jeden po drugim i nie resetuje licznika `AUTO_INCREMENT`, natomiast `TRUNCATE TABLE tabela` (DDL) szybko opróżnia tabelę i resetuje `AUTO_INCREMENT` do 1. | A) Składnia aktualizacji to UPDATE INTO tabela VALUES (...) WHERE id = 5, a usuwania to DELETE * FROM tabela WHERE id = 5; B) Polecenie DELETE FROM tabela resetuje licznik AUTO_INCREMENT do 1 tak samo jak TRUNCATE TABLE; C) W poleceniu DELETE po słowie DELETE należy obowiązkowo wpisać gwiazdkę: DELETE * FROM tabela; D) Dodawanie wiersza: `INSERT INTO tabela (kol1, kol2) VALUES ('wart1', 10);`. Aktualizacja wierszy: `UPDATE tabela SET kol1 = 'nowa', kol2 = kol2 + 1 WHERE id = 5;`. Usuwanie wierszy: `DELETE FROM tabela WHERE id = 5;`. Pominięcie klauzuli `WHERE` w poleceniu `UPDATE` spowoduje nadpisanie wartości we **WSZYSTKICH wierszach tabeli**, a pominięcie `WHERE` w poleceniu `DELETE FROM tabela;` usunie **wszystkie wiersze z tabeli**! ✓ |
| 5 | Jak w języku PHP obsługiwać pliki na serwerze (`fopen`, `fgets`, `fwrite`, `fclose`, `file_get_contents`, `file_put_contents`) oraz dołączać zewnętrzne pliki skryptów (`include`, `require`, `include_once`, `require_once`)? | Dołączanie plików PHP: `include 'plik.php';` w razie braku pliku generuje ostrzeżenie (`E_WARNING`) i kontynuuje wykonywanie skryptu, natomiast **`require 'plik.php';`** (oraz `require_once`) w razie braku pliku generuje błąd krytyczny (`E_COMPILE_ERROR`) i natychmiast zatrzymuje skrypt. Operacje na plikach: `fopen('dane.txt', 'r')` (`'r'` – odczyt, `'w'` – zapis z nadpisaniem od zera, `'a'` – dopisywanie na końcu pliku), odczyt linii w pętli `while (!feof($plik)) { $linia = fgets($plik); }`, zapis `fwrite($plik, $tekst)` oraz zamknięcie `fclose($plik)`. | Do fizycznego usunięcia pliku z dysku w języku PHP służy funkcja **`unlink('plik.txt')`**, natomiast do sprawdzenia, czy plik istnieje — funkcja **`file_exists('plik.txt')`**. | A) Brak pliku w instrukcji include powoduje natychmiastowe zatrzymanie skryptu błędem krytycznym, a w require tylko ostrzeżenie; B) Otwarcie pliku w trybie fopen('log.txt', 'w') dopisuje nowe dane na samym końcu pliku bez usuwania wcześniejszej zawartości; C) Dołączanie plików PHP: `include 'plik.php';` w razie braku pliku generuje ostrzeżenie (`E_WARNING`) i kontynuuje wykonywanie skryptu, natomiast **`require 'plik.php';`** (oraz `require_once`) w razie braku pliku generuje błąd krytyczny (`E_COMPILE_ERROR`) i natychmiast zatrzymuje skrypt. Operacje na plikach: `fopen('dane.txt', 'r')` (`'r'` – odczyt, `'w'` – zapis z nadpisaniem od zera, `'a'` – dopisywanie na końcu pliku), odczyt linii w pętli `while (!feof($plik)) { $linia = fgets($plik); }`, zapis `fwrite($plik, $tekst)` oraz zamknięcie `fclose($plik)`. ✓; D) Funkcja fclose() usuwa plik fizycznie z dysku twardego serwera |
| 6 | Jak w dokumencie HTML5 poprawnie dołączyć zewnętrzny arkusz stylów CSS, zewnętrzny skrypt JavaScript oraz ustawić kodowanie znaków UTF-8 i ikonę strony (favicon) zgodnie z wymogami CKE INF.03? | W sekcji `<head>` umieszcza się: kodowanie `<meta charset="UTF-8">`, arkusz stylów `<link rel="stylesheet" href="styl.css">`, ikonę strony `<link rel="icon" href="obraz.png">` (lub `rel="shortcut icon"`), natomiast zewnętrzny plik JavaScript dołącza się znacznikiem `<script src="skrypt.js"></script>` (w `<head>` z atrybutem `defer` lub przed zamknięciem `</body>`). | Bardzo częsty błąd na egzaminie praktycznym INF.03: znacznik `<script src="..."></script>` MUSI posiadać znacznik zamykający `</script>`, a w `<link rel="stylesheet" href="styl.css">` atrybutem wskazującym plik jest `href`, a nie `src`! | A) Arkusz CSS dołącza się znacznikiem <style src="styl.css">, a skrypt JS znacznikiem <link rel="script" href="skrypt.js">; B) Znacznik <script src="skrypt.js" /> jest elementem pustym i nie wymaga znacznika zamykającego </script>; C) Kodowanie UTF-8 ustawia się w sekcji <body> za pomocą atrybutu <body encoding="UTF-8">; D) W sekcji `<head>` umieszcza się: kodowanie `<meta charset="UTF-8">`, arkusz stylów `<link rel="stylesheet" href="styl.css">`, ikonę strony `<link rel="icon" href="obraz.png">` (lub `rel="shortcut icon"`), natomiast zewnętrzny plik JavaScript dołącza się znacznikiem `<script src="skrypt.js"></script>` (w `<head>` z atrybutem `defer` lub przed zamknięciem `</body>`). ✓ |
| 7 | Jak w języku PHP połączyć się z bazą danych MySQL/MariaDB za pomocą rozszerzenia `mysqli` (w stylu proceduralnym i obiektowym), wykonać zapytanie `SELECT`, pobrać wiersze w pętli `while` i zamknąć połączenie? | Styl proceduralny (najczęstszy w arkuszach INF.03): (1) połączenie: `$conn = mysqli_connect('localhost', 'root', '', 'nazwa_bazy');`, (2) zapytanie: `$wynik = mysqli_query($conn, $sql);`, (3) iteracja po wierszach: `while ($wiersz = mysqli_fetch_row($wynik))` (indeksy liczbowe `$wiersz[0]`) lub `mysqli_fetch_assoc($wynik)` (klucze po nazwach kolumn `$wiersz['imie']`) lub `mysqli_fetch_array($wynik)`, (4) zamknięcie połączenia: `mysqli_close($conn);` (w stylu obiektowym: `new mysqli(...)`, `$conn->query($sql)`, `$wynik->fetch_assoc()`, `$conn->close()`). | Uwaga na kolejność argumentów w `mysqli_query($conn, $sql)`: pierwszym argumentem w stylu proceduralnym `mysqli` jest ZAWSZE obiekt połączenia `$conn`, a drugim łańcuch zapytania `$sql`! (Odwrotnie niż w usuniętym przed laty rozszerzeniu `mysql_query`). | A) W PHP 8.x do łączenia z MySQL używa się funkcji mysql_connect() oraz mysql_fetch_row(); B) Styl proceduralny (najczęstszy w arkuszach INF.03): (1) połączenie: `$conn = mysqli_connect('localhost', 'root', '', 'nazwa_bazy');`, (2) zapytanie: `$wynik = mysqli_query($conn, $sql);`, (3) iteracja po wierszach: `while ($wiersz = mysqli_fetch_row($wynik))` (indeksy liczbowe `$wiersz[0]`) lub `mysqli_fetch_assoc($wynik)` (klucze po nazwach kolumn `$wiersz['imie']`) lub `mysqli_fetch_array($wynik)`, (4) zamknięcie połączenia: `mysqli_close($conn);` (w stylu obiektowym: `new mysqli(...)`, `$conn->query($sql)`, `$wynik->fetch_assoc()`, `$conn->close()`). ✓; C) Funkcja mysqli_fetch_row() zwraca tablicę asocjacyjną indeksowaną wyłącznie nazwami kolumn tabeli; D) W mysqli_query() pierwszym argumentem jest zawsze tekst zapytania SQL, a drugim identyfikator połączenia $conn |
| 8 | Jak oblicza się specyficzność (priorytet) selektorów w kaskadowych arkuszach stylów CSS3 i co oznaczają kombinatory `A B`, `A > B`, `A + B` oraz `A ~ B`? | Waga (specyficzność) w CSS od najwyższej: (1) styl wpisany bezpośrednio w atrybucie `style="..."` (1,0,0,0), (2) selektor identyfikatora `#id` (0,1,0,0), (3) selektor klasy `.klasa`, atrybutu `[type="text"]` i pseudoklasy `:hover` (0,0,1,0), (4) selektor znacznika `p`, `div` i pseudoelementu `::before` (0,0,0,1); selektor uniwersalny `*` ma wagę 0. Kombinatory: `A B` (potomek dowolnego stopnia wewnątrz A), `A > B` (bezpośrednie dziecko elementu A), `A + B` (bezpośredni sąsiad — pierwszy element B zaraz po A), `A ~ B` (wszyscy bracia B występujący po A). | W arkuszach egzaminacyjnych INF.03 bardzo często pojawia się wymóg ostylowania odnośników lub wierszy tabeli po najechaniu kursorem myszy (`a:hover`, `tr:hover`) oraz obrazów wewnątrz konkretnego bloku (`#lewy img`). | A) Selektor znacznika (np. div) ma wyższy priorytet niż selektor klasy (.blok) oraz identyfikatora (#baner); B) Waga (specyficzność) w CSS od najwyższej: (1) styl wpisany bezpośrednio w atrybucie `style="..."` (1,0,0,0), (2) selektor identyfikatora `#id` (0,1,0,0), (3) selektor klasy `.klasa`, atrybutu `[type="text"]` i pseudoklasy `:hover` (0,0,1,0), (4) selektor znacznika `p`, `div` i pseudoelementu `::before` (0,0,0,1); selektor uniwersalny `*` ma wagę 0. Kombinatory: `A B` (potomek dowolnego stopnia wewnątrz A), `A > B` (bezpośrednie dziecko elementu A), `A + B` (bezpośredni sąsiad — pierwszy element B zaraz po A), `A ~ B` (wszyscy bracia B występujący po A). ✓; C) Kombinator div > p wybiera wyłącznie akapity znajdujące się poza znacznikiem div; D) Pseudoklasa :hover działa tylko wtedy, gdy jest zapisana po podwójnym dwukropku ::hover |
| 9 | Jak w języku JavaScript dynamicznie zmienić styl CSS elementu, podmienić klasę CSS lub zmienić obrazek (`src` i `alt`) po kliknięciu przycisku? | Styl inline modyfikuje się przez obiekt `.style` z nazwami właściwości w notacji **camelCase**, np. `el.style.backgroundColor = 'red'`, `el.style.fontSize = '20px'`, `el.style.color = '#ffffff'`. Klasy CSS modyfikuje się przez `el.classList.add('aktywny')`, `el.classList.remove('ukryty')` lub `el.classList.toggle('ciemny')`. Atrybut obrazu zmienia się bezpośrednio: `obraz.src = 'nowy.jpg'` oraz `obraz.alt = 'Opis'`. | Obsługę zdarzenia kliknięcia w zadaniach INF.03 można podpiąć w HTML atrybutem `onclick="oblicz()"` albo w skrypcie JS metodą `przycisk.addEventListener('click', oblicz)`. | A) W JavaScript właściwości CSS z myślnikiem zapisuje się identycznie jak w CSS: el.style.background-color = 'red'; B) Aby zmienić kolor tekstu w JavaScript, używa się właściwości el.style.fontColor = 'blue'; C) Zdarzenie kliknięcia w HTML zapisuje się atrybutem onpress="funkcja()"; D) Styl inline modyfikuje się przez obiekt `.style` z nazwami właściwości w notacji **camelCase**, np. `el.style.backgroundColor = 'red'`, `el.style.fontSize = '20px'`, `el.style.color = '#ffffff'`. Klasy CSS modyfikuje się przez `el.classList.add('aktywny')`, `el.classList.remove('ukryty')` lub `el.classList.toggle('ciemny')`. Atrybut obrazu zmienia się bezpośrednio: `obraz.src = 'nowy.jpg'` oraz `obraz.alt = 'Opis'`. ✓ |
| 10 | Do czego służą programy `mysqldump` oraz `mysql` (oraz zakładka Eksport/Import w phpMyAdmin) podczas wykonywania kopii zapasowej i odtwarzania bazy danych na egzaminie praktycznym INF.03? | Narzędzie wiersza poleceń **`mysqldump`** służy do wykonywania logicznej kopii zapasowej (eksportu struktury i danych do pliku `.sql`), np. `mysqldump -u root -p nazwa_bazy > kopia.sql`. Program kliencki **`mysql`** służy do wykonywania zapytań oraz importu bazy danych z pliku skryptowego `.sql`: `mysql -u root -p nazwa_bazy < kopia.sql` (w konsoli interaktywnej SQL import wykonuje się też poleceniem `SOURCE sciezka/do/pliku.sql;`). | Praktyczna wskazówka na egzamin INF.03: na początku zadania egzaminacyjnego należy w phpMyAdmin (lub konsoli) najpierw utworzyć bazę danych o nazwie dokładnie takiej, jakiej wymaga arkusz (z kolacją `utf8_unicode_ci` lub `utf8mb4_polish_ci`), kliknąć tę bazę na liście po lewej stronie i dopiero wtedy przejść do zakładki **Import**, aby wczytać dostarczony przez CKE plik `baza.sql`! | A) Polecenie mysqldump służy do importowania pliku .sql do bazy, a mysql > kopia.sql służy do eksportu bazy; B) Plik .sql wyeksportowany przez mysqldump jest plikiem binarnym, którego nie można otworzyć w edytorze tekstu; C) Narzędzie wiersza poleceń **`mysqldump`** służy do wykonywania logicznej kopii zapasowej (eksportu struktury i danych do pliku `.sql`), np. `mysqldump -u root -p nazwa_bazy > kopia.sql`. Program kliencki **`mysql`** służy do wykonywania zapytań oraz importu bazy danych z pliku skryptowego `.sql`: `mysql -u root -p nazwa_bazy < kopia.sql` (w konsoli interaktywnej SQL import wykonuje się też poleceniem `SOURCE sciezka/do/pliku.sql;`). ✓; D) Przed zaimportowaniem tabeli w phpMyAdmin nie trzeba tworzyć ani wybierać żadnej bazy danych, jeśli plik .sql nie zawiera instrukcji CREATE DATABASE |
| 11 | Jak w CSS3 ułożyć trzy bloki obok siebie w jednym wierszu za pomocą modułu Flexbox (`display: flex`), klasycznego opływania (`float: left`) lub siatki CSS Grid (`display: grid`)? | (1) **Flexbox** (najwygodniejszy w INF.03): na kontenerze-rodzicu (np. `main`) ustawiamy `display: flex;` (domyślny kierunek `flex-direction: row;` układa dzieci obok siebie; wyrównanie w osi głównej to `justify-content`, a w osi poprzecznej `align-items`). (2) **Float**: na każdym z bloków potomnych ustawiamy `float: left;` oraz szerokości sumujące się do ≤ 100% (np. `30%`, `40%`, `30%`), a na stopce `clear: both;`. (3) **CSS Grid**: na rodzicu `display: grid; grid-template-columns: 30% 40% 30%;`. | Jeśli w zadaniu INF.03 układ kolumnowy budujesz za pomocą `float: left`, bezwzględnie pamiętaj o dodaniu `clear: both;` w selektorze `footer`, w przeciwnym razie stopka „wjedzie” pod kolumny! | A) (1) **Flexbox** (najwygodniejszy w INF.03): na kontenerze-rodzicu (np. `main`) ustawiamy `display: flex;` (domyślny kierunek `flex-direction: row;` układa dzieci obok siebie; wyrównanie w osi głównej to `justify-content`, a w osi poprzecznej `align-items`). (2) **Float**: na każdym z bloków potomnych ustawiamy `float: left;` oraz szerokości sumujące się do ≤ 100% (np. `30%`, `40%`, `30%`), a na stopce `clear: both;`. (3) **CSS Grid**: na rodzicu `display: grid; grid-template-columns: 30% 40% 30%;`. ✓; B) Właściwość display: flex nadaje się bezpośrednio każdemu z trzech bloków podrzędnych, a nie ich wspólnemu rodzicowi; C) Po użyciu float: left na blokach głównych stopka <footer> automatycznie układa się poniżej nich bez użycia clear: both; D) W Flexboxie właściwość flex-direction: column układa elementy obok siebie w poziomie |
| 12 | Jakie znaczniki semantyczne języka HTML5 budują typowy układ strony w zadaniach praktycznych egzaminu zawodowego CKE INF.03 i czym różni się element blokowy (`<div>`, `<p>`, `<section>`) od liniowego (`<span>`, `<a>`, `<img>`)? | Semantyczny szkielet strony w INF.03 tworzą znaczniki: `<header>` (baner nagłówkowy), `<nav>` (nawigacja / menu), `<main>` (główna zawartość podzielona na `<section>` i `<article>`), `<aside>` (panel boczny) oraz `<footer>` (stopka z autorem/numerem zdającego). Elementy blokowe (`display: block`) zaczynają się od nowej linii i zajmują domyślnie 100% szerokości rodzica, natomiast elementy liniowe (`display: inline`) układają się w jednym wierszu obok siebie i zajmują tyle miejsca, ile ich zawartość. | W HTML5 atrybut `id` musi być unikalny w obrębie całego dokumentu (w CSS odwołujemy się do niego przez `#id`, a w JS przez `document.getElementById('id')`), natomiast atrybut `class` może być przypisany wielu elementom (`.klasa`). | A) Znaczniki <span> i <a> są elementami blokowymi, natomiast <div>, <header> i <footer> są elementami liniowymi; B) Semantyczny szkielet strony w INF.03 tworzą znaczniki: `<header>` (baner nagłówkowy), `<nav>` (nawigacja / menu), `<main>` (główna zawartość podzielona na `<section>` i `<article>`), `<aside>` (panel boczny) oraz `<footer>` (stopka z autorem/numerem zdającego). Elementy blokowe (`display: block`) zaczynają się od nowej linii i zajmują domyślnie 100% szerokości rodzica, natomiast elementy liniowe (`display: inline`) układają się w jednym wierszu obok siebie i zajmują tyle miejsca, ile ich zawartość. ✓; C) Znacznik <head> służy do wyświetlania widocznego baneru nagłówkowego na górze strony internetowej; D) W języku HTML5 atrybut id może powtarzać się wielokrotnie na tej samej stronie dla różnych elementów |
| 13 | Jak w języku PHP bezpiecznie wykonywać zapytania z danymi od użytkownika (ochrona przed SQL Injection za pomocą Prepared Statements w `mysqli` / `PDO`) oraz do czego służą funkcje `isset()` i `!empty()`? | Funkcja `isset($_POST['pole'])` sprawdza, czy zmienna istnieje i nie jest równa `null`, a `!empty($_POST['pole'])` sprawdza dodatkowo, czy nie jest pustym ciągiem `""`. Aby całkowicie zabezpieczyć zapytanie przed **SQL Injection**, stosuje się instrukcje przygotowane (**Prepared Statements**): `$stmt = $conn->prepare('SELECT id, nazwa FROM towary WHERE cena < ? AND kategoria = ?');`, bindowanie parametrów `$stmt->bind_param('ds', $cena, $kat);` (`i` – integer, `d` – double, `s` – string) oraz `$stmt->execute();`. | Bardzo częsta pułapka w PHP na egzaminie INF.03: gdy użytkownik kliknie przycisk „Wyślij” pozostawiając puste pole `<input type="text" name="imie">`, zmienna `$_POST['imie']` ISTNIEJE i ma wartość `""`, więc `isset($_POST['imie'])` zwróci **`true`**! Aby sprawdzić, czy użytkownik faktycznie coś wpisał, należy użyć `!empty($_POST['imie'])`. | A) Funkcja isset() sprawdza, czy pole tekstowe formularza nie zostało wysłane jako pusty ciąg znaków ""; B) Funkcja `isset($_POST['pole'])` sprawdza, czy zmienna istnieje i nie jest równa `null`, a `!empty($_POST['pole'])` sprawdza dodatkowo, czy nie jest pustym ciągiem `""`. Aby całkowicie zabezpieczyć zapytanie przed **SQL Injection**, stosuje się instrukcje przygotowane (**Prepared Statements**): `$stmt = $conn->prepare('SELECT id, nazwa FROM towary WHERE cena < ? AND kategoria = ?');`, bindowanie parametrów `$stmt->bind_param('ds', $cena, $kat);` (`i` – integer, `d` – double, `s` – string) oraz `$stmt->execute();`. ✓; C) Wysłanie pustego pola tekstowego <input type="text" name="login"> powoduje, że isset($_POST['login']) zwraca false; D) Zastosowanie metody POST zamiast GET w formularzu HTML automatycznie chroni bazę danych przed atakiem SQL Injection |
| 14 | Na czym polega pierwsza (1NF), druga (2NF) oraz trzecia postać normalna (3NF) w procesie normalizacji relacyjnych baz danych i jak realizuje się relację wiele-do-wielu (N:M)? | **1NF**: wszystkie wartości atrybutów są atomowe (niepodzielne — brak wielu wartości lub list w jednej komórce), brak powtarzających się grup kolumn i każdy wiersz jest jednoznacznie identyfikowany kluczem głównym. **2NF**: tabela jest w 1NF oraz każdy atrybut niekluczowy jest **w pełni funkcyjnie zależny od CAŁEGO klucza głównego** (brak częściowych zależności od fragmentu klucza złożonego). **3NF**: tabela jest w 2NF oraz brak **przechodnich zależności funkcyjnych** (żaden atrybut niekluczowy nie zależy od innego atrybutu niekluczowego, np. nazwa miasta nie powinna zależeć od kodu pocztowego w tabeli klientów). Relację **wiele-do-wielu (N:M)** realizuje się za pomocą **dodatkowej tabeli pośredniczącej (łączącej)** zawierającej klucze obce do obu tabel głównych. | Ważna własność teoretyczna: jeżeli tabela jest w **1NF** i jej klucz główny jest **pojedynczą kolumną** (nie jest kluczem złożonym), to tabela ta jest automatycznie również w **2NF**! | A) 1NF usuwa zależności przechodnie między kolumnami niekluczowymi, a relację N:M tworzy się bez tabeli pośredniczącej; B) Tabela z pojedynczym (prostym) kluczem głównym będąca w 1NF może naruszać drugą postać normalną (2NF); C) Celem normalizacji bazy danych jest maksymalne zwiększenie redundancji (nadmiarowości) danych w jednej tabeli; D) **1NF**: wszystkie wartości atrybutów są atomowe (niepodzielne — brak wielu wartości lub list w jednej komórce), brak powtarzających się grup kolumn i każdy wiersz jest jednoznacznie identyfikowany kluczem głównym. **2NF**: tabela jest w 1NF oraz każdy atrybut niekluczowy jest **w pełni funkcyjnie zależny od CAŁEGO klucza głównego** (brak częściowych zależności od fragmentu klucza złożonego). **3NF**: tabela jest w 2NF oraz brak **przechodnich zależności funkcyjnych** (żaden atrybut niekluczowy nie zależy od innego atrybutu niekluczowego, np. nazwa miasta nie powinna zależeć od kodu pocztowego w tabeli klientów). Relację **wiele-do-wielu (N:M)** realizuje się za pomocą **dodatkowej tabeli pośredniczącej (łączącej)** zawierającej klucze obce do obu tabel głównych. ✓ |
| 15 | Jakie zasady dostępności cyfrowej (WCAG 2.1 — Web Content Accessibility Guidelines) są sprawdzane na egzaminie zawodowym INF.03 i INF.04? | Standard WCAG opiera się na 4 filarach (**POUR**: **P**erceivable — Postrzegalność, **O**perable — Funkcjonalność, **U**nderstandable — Zrozumiałość, **R**obust — Solidność). W praktyce kodu HTML/CSS oznacza to: obowiązkowy atrybut **`alt`** w każdym znaczniku `<img>`, deklarację języka dokumentu `<html lang="pl">`, powiązanie każdego pola formularza z etykietą `<label for="...">`, logiczną hierarchię nagłówków (`<h1>` -> `<h2>` -> `<h3>`), pełną obsługę nawigacji samą klawiaturą (`Tab`, widoczny `:focus`) oraz odpowiedni kontrast kolorystyczny tekstu do tła (**minimum 4.5:1** dla normalnego tekstu na poziomie **AA** oraz 7:1 na poziomie AAA). | Trzy poziomy zgodności z WCAG to od podstawowego do najwyższego: **A**, **AA** (standard prawnie wymagany dla podmiotów publicznych w Polsce i UE) oraz **AAA**. | A) Minimalny wymagany kontrast tekstu na poziomie WCAG AA wynosi 1.5:1, a atrybut alt w obrazkach jest niezalecany; B) Standard WCAG opiera się na 4 filarach (**POUR**: **P**erceivable — Postrzegalność, **O**perable — Funkcjonalność, **U**nderstandable — Zrozumiałość, **R**obust — Solidność). W praktyce kodu HTML/CSS oznacza to: obowiązkowy atrybut **`alt`** w każdym znaczniku `<img>`, deklarację języka dokumentu `<html lang="pl">`, powiązanie każdego pola formularza z etykietą `<label for="...">`, logiczną hierarchię nagłówków (`<h1>` -> `<h2>` -> `<h3>`), pełną obsługę nawigacji samą klawiaturą (`Tab`, widoczny `:focus`) oraz odpowiedni kontrast kolorystyczny tekstu do tła (**minimum 4.5:1** dla normalnego tekstu na poziomie **AA** oraz 7:1 na poziomie AAA). ✓; C) Zgodnie z WCAG informacje na stronie powinny być przekazywane wyłącznie za pomocą samego koloru (np. czerwona ramka bez komunikatu tekstowego); D) Poziom A jest najwyższym i najbardziej rygorystycznym poziomem dostępności WCAG, wyższym niż AAA |
| 16 | Jak w CSS3 tworzy się responsywne strony internetowe (RWD — Responsive Web Design) za pomocą zapytań o media (`@media`) oraz jednostek względnych (`%`, `vw`, `vh`, `rem`, `em`)? | Responsywność wymaga w sekcji `<head>` znacznika `<meta name="viewport" content="width=device-width, initial-scale=1.0">` oraz reguł `@media`, np. `@media screen and (max-width: 768px) { ... }` (styl aplikowany, gdy szerokość ekranu jest ≤ 768 px) lub `@media (min-width: 1024px) { ... }`. Jednostki względne: `%` (procent wymiaru rodzica), `vw` / `vh` (1% szerokości / wysokości okna przeglądarki — viewportu), `em` (wielokrotność rozmiaru czcionki elementu/rodzica), `rem` (wielokrotność rozmiaru czcionki elementu głównego `<html>`). | W zadaniach INF.03 często pojawia się wymóg ukrycia lub zmiany układu bloków dla mniejszych rozdzielczości za pomocą `@media (max-width: 800px) { main { flex-direction: column; } }`. | A) Reguła @media (max-width: 600px) stosuje podane style wyłącznie na ekranach o szerokości większej niż 600 pikseli; B) Responsywność wymaga w sekcji `<head>` znacznika `<meta name="viewport" content="width=device-width, initial-scale=1.0">` oraz reguł `@media`, np. `@media screen and (max-width: 768px) { ... }` (styl aplikowany, gdy szerokość ekranu jest ≤ 768 px) lub `@media (min-width: 1024px) { ... }`. Jednostki względne: `%` (procent wymiaru rodzica), `vw` / `vh` (1% szerokości / wysokości okna przeglądarki — viewportu), `em` (wielokrotność rozmiaru czcionki elementu/rodzica), `rem` (wielokrotność rozmiaru czcionki elementu głównego `<html>`). ✓; C) Jednostka 100vh oznacza zawsze 100 pikseli wysokości na urządzeniach mobilnych; D) Zapytania @media można pisać wyłącznie w osobnym pliku JavaScript, a nie w pliku .css |
| 17 | Jakie znaczenie mają własności transakcji bazodanowych określane akronimem ACID (Atomicity, Consistency, Isolation, Durability)? | **Atomicity (Atomowość / Niepodzielność)**: transakcja wykonuje się w całości albo wcale („wszystko albo nic” — `COMMIT` zatwierdza całość, `ROLLBACK` cofa wszystkie operacje). **Consistency (Spójność)**: transakcja przeprowadza bazę z jednego stanu spójnego (spełniającego wszystkie więzy integralności) w inny stan spójny. **Isolation (Izolacja)**: współbieżnie wykonywane transakcje są od siebie odseparowane i nie zakłócają swoich wyników pośrednich. **Durability (Trwałość)**: po zatwierdzeniu transakcji (`COMMIT`) jej skutki są trwale zapisane nawet w razie awarii zasilania lub restartu serwera. | W MySQL/MariaDB domyślnym silnikiem składowania obsługującym transakcje **ACID**, blokowanie na poziomie wierszy oraz klucze obce (**FOREIGN KEY**) jest **InnoDB** (natomiast starszy silnik **MyISAM** nie obsługuje ani transakcji, ani kluczy obcych). | A) Atomicity oznacza, że każda kolumna zawiera wartości atomowe (1NF), a Durability oznacza brak limitu rozmiaru bazy; B) Silnik tabel MyISAM w MySQL w pełni obsługuje transakcje ACID oraz klucze obce, w przeciwieństwie do silnika InnoDB; C) **Atomicity (Atomowość / Niepodzielność)**: transakcja wykonuje się w całości albo wcale („wszystko albo nic” — `COMMIT` zatwierdza całość, `ROLLBACK` cofa wszystkie operacje). **Consistency (Spójność)**: transakcja przeprowadza bazę z jednego stanu spójnego (spełniającego wszystkie więzy integralności) w inny stan spójny. **Isolation (Izolacja)**: współbieżnie wykonywane transakcje są od siebie odseparowane i nie zakłócają swoich wyników pośrednich. **Durability (Trwałość)**: po zatwierdzeniu transakcji (`COMMIT`) jej skutki są trwale zapisane nawet w razie awarii zasilania lub restartu serwera. ✓; D) Polecenie ROLLBACK trwale zatwierdza zmiany wprowadzone w bieżącej transakcji |
| 18 | Jak działają funkcje agregujące `COUNT()`, `SUM()`, `AVG()`, `MIN()`, `MAX()` oraz funkcje tekstowe i daty (`CONCAT()`, `SUBSTRING()`, `UPPER()`, `LOWER()`, `ROUND()`, `NOW()`, `CURDATE()`, `YEAR()`) w SQL? | `COUNT(*)` zlicza wszystkie wiersze w grupie (łącznie z wierszami zawierającymi `NULL`), natomiast `COUNT(kolumna)` zlicza tylko wiersze, w których dana kolumna ma wartość różną od `NULL` (`COUNT(DISTINCT kol)` zlicza wartości unikalne). `SUM`, `AVG`, `MIN`, `MAX` obliczają sumę, średnią, minimum i maksimum (ignorując `NULL`). `CONCAT(imie, ' ', nazwisko)` łączy napisy, `ROUND(liczba, 2)` zaokrągla do 2 miejsc po przecinku, `CURDATE()` zwraca bieżącą datę (`RRRR-MM-DD`), a `YEAR(data)` wyciąga z daty sam rok. | Uwaga na egzamin INF.03: w MySQL/MariaDB operator `+` między dwoma napisami próbuje dodać je jako liczby (co dla tekstów daje `0`), dlatego do łączenia napisów w zapytaniu SQL używa się funkcji **`CONCAT(kol1, ' ', kol2)`**! | A) Funkcja COUNT(*) pomija wszystkie wiersze, w których jakakolwiek kolumna ma wartość NULL; B) Do łączenia imienia i nazwiska ze spacją w standardowym MySQL używa się operatora plusa: SELECT imie + ' ' + nazwisko; C) `COUNT(*)` zlicza wszystkie wiersze w grupie (łącznie z wierszami zawierającymi `NULL`), natomiast `COUNT(kolumna)` zlicza tylko wiersze, w których dana kolumna ma wartość różną od `NULL` (`COUNT(DISTINCT kol)` zlicza wartości unikalne). `SUM`, `AVG`, `MIN`, `MAX` obliczają sumę, średnią, minimum i maksimum (ignorując `NULL`). `CONCAT(imie, ' ', nazwisko)` łączy napisy, `ROUND(liczba, 2)` zaokrągla do 2 miejsc po przecinku, `CURDATE()` zwraca bieżącą datę (`RRRR-MM-DD`), a `YEAR(data)` wyciąga z daty sam rok. ✓; D) Funkcja AVG(cena) traktuje wiersze z wartością NULL jako zera, obniżając średnią arytmetyczną |
| 19 | Jak w języku PHP utworzyć, odczytać i usunąć ciasteczko (cookie) oraz jak zainicjować i obsłużyć sesję użytkownika (`$_SESSION`)? | **Ciasteczko (przechowywane po stronie przeglądarki klienta)**: tworzenie `setcookie('nazwa', 'wartosc', time() + 3600);` (ważne przez 1 godzinę = 3600 s), odczyt z tablicy superglobalnej `$_COOKIE['nazwa']`, usunięcie przez ustawienie czasu w przeszłości `setcookie('nazwa', '', time() - 3600);`. **Sesja (przechowywana po stronie serwera)**: na samym początku skryptu należy wywołać `session_start();`, dane zapisuje i odczytuje się w tablicy `$_SESSION['uzytkownik'] = 'Jan';`, a sesję kończy przez `session_unset();` i `session_destroy();`. | W zadaniach INF.03 z licznikiem odwiedzin lub komunikatem „Dzień dobry / Witaj ponownie” pamiętaj, że trzeci argument `setcookie()` to znacznik czasu uniksowego wygaśnięcia (`time() + 3600` dla 1 godziny, `time() + 7200` dla 2 godzin) i że ciasteczko pojawia się w `$_COOKIE` dopiero przy kolejnym żądaniu HTTP (odświeżeniu strony). | A) Dane z tablicy $_SESSION są zapisywane w pliku tekstowym na dysku użytkownika, a ciasteczka tworzy się funkcją create_cookie(); B) W trzecim argumencie funkcji setcookie() podaje się wyłącznie liczbę sekund (np. 3600) bez dodawania bieżącego czasu time(); C) **Ciasteczko (przechowywane po stronie przeglądarki klienta)**: tworzenie `setcookie('nazwa', 'wartosc', time() + 3600);` (ważne przez 1 godzinę = 3600 s), odczyt z tablicy superglobalnej `$_COOKIE['nazwa']`, usunięcie przez ustawienie czasu w przeszłości `setcookie('nazwa', '', time() - 3600);`. **Sesja (przechowywana po stronie serwera)**: na samym początku skryptu należy wywołać `session_start();`, dane zapisuje i odczytuje się w tablicy `$_SESSION['uzytkownik'] = 'Jan';`, a sesję kończy przez `session_unset();` i `session_destroy();`. ✓; D) Wartość ustawiona przez setcookie() jest natychmiast dostępna w tablicy $_COOKIE w tym samym przebiegu skryptu bez przeładowania strony |
| 20 | Na jakie podgrupy dzielą się instrukcje języka SQL: `DDL`, `DML`, `DQL` oraz `DCL` i jakie polecenia należą do każdej z nich? | **DDL (Data Definition Language — definiowanie struktury bazy)**: `CREATE`, `ALTER`, `DROP`, `TRUNCATE`, `RENAME`. **DML (Data Manipulation Language — manipulowanie danymi w tabelach)**: `INSERT`, `UPDATE`, `DELETE`. **DQL (Data Query Language — odpytywanie danych)**: `SELECT`. **DCL (Data Control Language — kontrola uprawnień)**: `GRANT`, `REVOKE` (oraz TCL do transakcji: `COMMIT`, `ROLLBACK`, `SAVEPOINT`). | Rozróżnienie między `ALTER TABLE` (DDL — zmiana struktury tabeli, np. dodanie kolumny) a `UPDATE` (DML — zmiana wartości danych w istniejących wierszach) oraz między `DROP` / `TRUNCATE` (DDL) a `DELETE` (DML) to pewniak na części pisemnej INF.03. | A) Polecenie SELECT należy do grupy DDL, a polecenia CREATE TABLE i ALTER TABLE należą do grupy DML; B) **DDL (Data Definition Language — definiowanie struktury bazy)**: `CREATE`, `ALTER`, `DROP`, `TRUNCATE`, `RENAME`. **DML (Data Manipulation Language — manipulowanie danymi w tabelach)**: `INSERT`, `UPDATE`, `DELETE`. **DQL (Data Query Language — odpytywanie danych)**: `SELECT`. **DCL (Data Control Language — kontrola uprawnień)**: `GRANT`, `REVOKE` (oraz TCL do transakcji: `COMMIT`, `ROLLBACK`, `SAVEPOINT`). ✓; C) Polecenie UPDATE służy do zmiany typu kolumny w tabeli, natomiast ALTER TABLE służy do zmiany wartości w wierszach; D) Polecenie REVOKE należy do grupy DML i służy do cofania ostatniego polecenia INSERT |
| 21 | Jak w HTML5 zbudować tabelę z komórkami scalonymi w poziomie i w pionie oraz listę numerowaną, punktowaną i definicyjną? | Tabelę tworzy znacznik `<table>` z wierszami `<tr>`, komórkami nagłówkowymi `<th>` i komórkami danych `<td>`. Scalanie komórek w poziomie (przez kilka kolumn) realizuje atrybut `colspan="n"`, a scalanie w pionie (przez kilka wierszy) atrybut `rowspan="n"`. Lista punktowana (nieuporządkowana) to `<ul>` z elementami `<li>`, lista numerowana (uporządkowana) to `<ol>` z elementami `<li>`, a lista definicyjna to `<dl>` zawierająca pojęcia `<dt>` i opisy `<dd>`. | Pamiętaj: po dodaniu `colspan="2"` w pierwszym `<td>` należy usunąć sąsiedni znacznik `<td>` w tym wierszu, aby łączna liczba kolumn w wierszu się zgadzała. | A) Atrybut colspan scala komórki w pionie, a rowspan scala komórki w poziomie; listę numerowaną tworzy znacznik <ul>; B) Wiersze tabeli oznacza się znacznikiem <tc>, a kolumny znacznikiem <trow>; C) Scalając 2 komórki w poziomie za pomocą colspan="2", w tym samym wierszu pozostawia się obie pierwotne komórki <td>; D) Tabelę tworzy znacznik `<table>` z wierszami `<tr>`, komórkami nagłówkowymi `<th>` i komórkami danych `<td>`. Scalanie komórek w poziomie (przez kilka kolumn) realizuje atrybut `colspan="n"`, a scalanie w pionie (przez kilka wierszy) atrybut `rowspan="n"`. Lista punktowana (nieuporządkowana) to `<ul>` z elementami `<li>`, lista numerowana (uporządkowana) to `<ol>` z elementami `<li>`, a lista definicyjna to `<dl>` zawierająca pojęcia `<dt>` i opisy `<dd>`. ✓ |
| 22 | Jak działają operatory `BETWEEN ... AND ...`, `IN (...)`, `LIKE` (ze znakami wieloznacznymi `%` oraz `_`) oraz sprawdzanie wartości pustych `IS NULL` / `IS NOT NULL` w SQL? | `BETWEEN a AND b` sprawdza przynależność do przedziału domkniętego obustronnie (`>= a AND <= b`). `IN (w1, w2, w3)` sprawdza, czy wartość należy do podanego zbioru. W operatorze wzorca tekstowego `LIKE`: znak procentu **`%`** zastępuje dowolny ciąg znaków (także pusty — 0, 1 lub więcej znaków), a znak podkreślenia **`_`** zastępuje dokładnie **jeden dowolny znak**. Wartości `NULL` (brak wartości) nigdy nie porównuje się znakiem `= NULL` ani `!= NULL`, lecz wyłącznie operatorami **`IS NULL`** oraz **`IS NOT NULL`**. | Wzorzec `LIKE 'A_'` dopasuje wyłącznie wyrazy dwuliterowe zaczynające się na `A` (np. `AS`, `ul`), natomiast wszystkie wyrazy zaczynające się na `A` o dowolnej długości dopasuje wzorzec `LIKE 'A%'`. | A) W operatorze LIKE gwiazdka * zastępuje dowolny ciąg znaków, znak ? zastępuje jeden znak, a wartości puste sprawdza się warunkiem kolumna = NULL; B) Operator BETWEEN 10 AND 20 nie uwzględnia wartości brzegowych 10 oraz 20; C) Wzorzec LIKE 'A_' wyszuka wszystkie wyrazy zaczynające się na literę A o dowolnej długości; D) `BETWEEN a AND b` sprawdza przynależność do przedziału domkniętego obustronnie (`>= a AND <= b`). `IN (w1, w2, w3)` sprawdza, czy wartość należy do podanego zbioru. W operatorze wzorca tekstowego `LIKE`: znak procentu **`%`** zastępuje dowolny ciąg znaków (także pusty — 0, 1 lub więcej znaków), a znak podkreślenia **`_`** zastępuje dokładnie **jeden dowolny znak**. Wartości `NULL` (brak wartości) nigdy nie porównuje się znakiem `= NULL` ani `!= NULL`, lecz wyłącznie operatorami **`IS NULL`** oraz **`IS NOT NULL`**. ✓ |
| 23 | Czym różnią się złączenia tabel `INNER JOIN`, `LEFT JOIN` (`LEFT OUTER JOIN`) oraz `RIGHT JOIN` (`RIGHT OUTER JOIN`) w bazach danych MySQL/MariaDB? | **`INNER JOIN` (złączenie wewnętrzne)**: zwraca tylko te wiersze, dla których warunek złączenia (`ON a.klucz = b.klucz`) jest spełniony w OBU łączonych tabelach. **`LEFT JOIN` (złączenie zewnętrzne lewostronne)**: zwraca WSZYSTKIE wiersze z tabeli po lewej stronie (wymienionej w `FROM`) oraz dopasowane wiersze z tabeli prawej, a w przypadku braku dopasowania wstawia w kolumnach tabeli prawej wartości `NULL`. **`RIGHT JOIN`**: zwraca wszystkie wiersze z tabeli prawej oraz dopasowane z lewej (lub `NULL` przy braku dopasowania). | Aby w SQL znaleźć rekordy z tabeli lewej, które NIE mają żadnych powiązanych rekordów w tabeli prawej (np. klientów bez żadnego zamówienia), stosuje się wzorzec: `SELECT k.* FROM klienci k LEFT JOIN zamowienia z ON k.id = z.klient_id WHERE z.id IS NULL;`. | A) INNER JOIN zwraca wszystkie wiersze z obu tabel, uzupełniając brakujące powiązania wartościami NULL; B) Zapis FROM klienci, zamowienia bez klauzuli WHERE wykonuje złączenie INNER JOIN po kluczu głównym; C) **`INNER JOIN` (złączenie wewnętrzne)**: zwraca tylko te wiersze, dla których warunek złączenia (`ON a.klucz = b.klucz`) jest spełniony w OBU łączonych tabelach. **`LEFT JOIN` (złączenie zewnętrzne lewostronne)**: zwraca WSZYSTKIE wiersze z tabeli po lewej stronie (wymienionej w `FROM`) oraz dopasowane wiersze z tabeli prawej, a w przypadku braku dopasowania wstawia w kolumnach tabeli prawej wartości `NULL`. **`RIGHT JOIN`**: zwraca wszystkie wiersze z tabeli prawej oraz dopasowane z lewej (lub `NULL` przy braku dopasowania). ✓; D) W MySQL nie można połączyć ze sobą więcej niż dwóch tabel w jednym zapytaniu SELECT |
| 24 | Na czym polega atak XSS (Cross-Site Scripting) oraz CSRF (Cross-Site Request Forgery) w aplikacjach internetowych i jak się przed nimi bronić w PHP i JavaScript? | **XSS (Cross-Site Scripting)** polega na wstrzyknięciu złośliwego kodu JavaScript (np. `<script>...</script>`) przez formularz lub parametr URL, który następnie zostaje wykonany w przeglądarce innych użytkowników odwiedzających stronę; obroną w PHP jest filtrowanie wyjścia funkcją **`htmlspecialchars($tekst, ENT_QUOTES, 'UTF-8')`** (zamieniającą `<`, `>`, `"`, `'` na encje HTML `&lt;`, `&gt;`) oraz stosowanie `.textContent` zamiast `.innerHTML` w JS. **CSRF (Cross-Site Request Forgery)** wymusza wykonanie nieautoryzowanej akcji w imieniu zalogowanego użytkownika; obroną są jednorazowe **tokeny CSRF** w formularzach oraz atrybut ciasteczka `SameSite=Strict` / `Lax`. | Do bezpiecznego przechowywania haseł użytkowników w bazie danych w języku PHP NIE stosuje się już przestarzałego `md5()` ani `sha1()`, lecz natywną funkcję **`password_hash($haslo, PASSWORD_DEFAULT)`** (korzystającą z algorytmu bcrypt/Argon2 z losową solą) oraz weryfikację przez **`password_verify($podane_haslo, $hash_z_bazy)`**. | A) Atak XSS polega na wstrzyknięciu złośliwego zapytania SQL bezpośrednio do bazy danych MySQL; B) Funkcja htmlspecialchars() służy do szyfrowania haseł użytkowników w bazie danych zamiast password_hash(); C) **XSS (Cross-Site Scripting)** polega na wstrzyknięciu złośliwego kodu JavaScript (np. `<script>...</script>`) przez formularz lub parametr URL, który następnie zostaje wykonany w przeglądarce innych użytkowników odwiedzających stronę; obroną w PHP jest filtrowanie wyjścia funkcją **`htmlspecialchars($tekst, ENT_QUOTES, 'UTF-8')`** (zamieniającą `<`, `>`, `"`, `'` na encje HTML `&lt;`, `&gt;`) oraz stosowanie `.textContent` zamiast `.innerHTML` w JS. **CSRF (Cross-Site Request Forgery)** wymusza wykonanie nieautoryzowanej akcji w imieniu zalogowanego użytkownika; obroną są jednorazowe **tokeny CSRF** w formularzach oraz atrybut ciasteczka `SameSite=Strict` / `Lax`. ✓; D) Stosowanie protokołu HTTPS automatycznie eliminuje podatność aplikacji na ataki XSS oraz SQL Injection |
| 25 | Czym różni się metoda `GET` od metody `POST` w formularzu HTML (`<form action="skrypt.php" method="...">`) i jak powiązać etykietę `<label>` z polem `<input>`? | Metoda **GET** dołącza dane formularza w sposób jawny do adresu URL po znaku zapytania (`?pole1=wartosc1&pole2=wartosc2`), ma ograniczoną długość i służy do pobierania/filtrowania danych (w PHP tablica `$_GET`). Metoda **POST** przesyła dane w ciele (body) żądania HTTP (niewidoczne w pasku adresu), nie ma limitu długości URL, obsługuje przesyłanie plików (`enctype="multipart/form-data"`) i służy do logowania oraz modyfikacji bazy danych (w PHP tablica `$_POST`). Etykietę `<label for="id_pola">` wiąże się z atrybutem `id` pola `<input id="id_pola" name="nazwa_dla_php">`. | Kluczowe rozróżnienie w INF.03: JavaScript (`getElementById`) szuka elementu po atrybucie **`id`**, natomiast serwer PHP (`$_POST['...']`, `$_GET['...']`) odbiera dane wyłącznie z pól posiadających atrybut **`name`**! | A) Metoda GET ukrywa hasła w ciele żądania HTTP, a metoda POST dokleja wszystkie pola formularza do paska adresu URL; B) Skrypt PHP odczytuje przesłane dane formularza na podstawie atrybutu id znacznika <input>, a nie atrybutu name; C) Aby przesłać formularz do skryptu PHP, przycisk musi mieć typ <button type="button"> zamiast <button type="submit">; D) Metoda **GET** dołącza dane formularza w sposób jawny do adresu URL po znaku zapytania (`?pole1=wartosc1&pole2=wartosc2`), ma ograniczoną długość i służy do pobierania/filtrowania danych (w PHP tablica `$_GET`). Metoda **POST** przesyła dane w ciele (body) żądania HTTP (niewidoczne w pasku adresu), nie ma limitu długości URL, obsługuje przesyłanie plików (`enctype="multipart/form-data"`) i służy do logowania oraz modyfikacji bazy danych (w PHP tablica `$_POST`). Etykietę `<label for="id_pola">` wiąże się z atrybutem `id` pola `<input id="id_pola" name="nazwa_dla_php">`. ✓ |
| 26 | Jak działa obiekt `Math` oraz praca z tablicami (`Array`) i ciągami znaków (`String`) w języku JavaScript w zadaniach egzaminacyjnych INF.03? | Obiekt `Math`: `Math.round(x)` (zaokrąglenie matematyczne do najbliższej całkowitej), `Math.ceil(x)` (zaokrąglenie w górę — np. przy liczeniu puszek farby lub paczek płytek potrzebnych do pomalowania/wyłożenia powierzchni!), `Math.floor(x)` (zaokrąglenie w dół), `Math.sqrt(x)` (pierwiastek), `Math.pow(x, y)` lub `x ** y` (potęga), `Math.random()` (losowa z od 0 (włącznie) do 1 (wyłącznie)). Na liczbie metoda `liczba.toFixed(2)` formatuje wynik do 2 miejsc po przecinku. Na tablicach: `.push()` (dodaje na koniec), `.pop()` (usuwa z końca), `.length` (długość tablicy lub napisu). | W zadaniach praktycznych CKE INF.03 typu „Oblicz ile puszek farby (lub opakowań paneli) potrzeba na pomalowanie powierzchni” zawsze należy użyć **`Math.ceil(powierzchnia / wydajnosc_puszki)`**, ponieważ nie można kupić ułamkowej części puszki, a zaokrąglenie w dół spowodowałoby brak materiału! | A) Funkcja Math.ceil(4.1) zwraca wartość 4, a Math.floor(4.9) zwraca wartość 5; B) Długość tablicy i ciągu znaków w JavaScript sprawdza się wywołaniem metody tablica.count(); C) Obiekt `Math`: `Math.round(x)` (zaokrąglenie matematyczne do najbliższej całkowitej), `Math.ceil(x)` (zaokrąglenie w górę — np. przy liczeniu puszek farby lub paczek płytek potrzebnych do pomalowania/wyłożenia powierzchni!), `Math.floor(x)` (zaokrąglenie w dół), `Math.sqrt(x)` (pierwiastek), `Math.pow(x, y)` lub `x ** y` (potęga), `Math.random()` (losowa z od 0 (włącznie) do 1 (wyłącznie)). Na liczbie metoda `liczba.toFixed(2)` formatuje wynik do 2 miejsc po przecinku. Na tablicach: `.push()` (dodaje na koniec), `.pop()` (usuwa z końca), `.length` (długość tablicy lub napisu). ✓; D) Funkcja Math.random() zwraca domyślnie liczbę całkowitą z przedziału od 1 do 100 |
| 27 | Jakie kody stanu odpowiedzi protokołu HTTP (`200`, `301`, `302`, `304`, `400`, `401`, `403`, `404`, `500`, `502`, `503`) powinien znać zdający egzamin INF.03 i INF.04? | Klasy kodów HTTP: **2xx (Sukces)**: `200 OK` (żądanie wykonane pomyślnie), `201 Created`; **3xx (Przekierowania)**: `301 Moved Permanently` (stałe przekierowanie), `302 Found` (tymczasowe przekierowanie), `304 Not Modified` (pobrano z pamięci podręcznej przeglądarki); **4xx (Błąd po stronie klienta)**: `400 Bad Request`, `401 Unauthorized` (brak uwierzytelnienia), `403 Forbidden` (brak uprawnień dostępu do zasobu mimo znanego żądania), `404 Not Found` (nie znaleziono zasobu pod podanym URL); **5xx (Błąd po stronie serwera)**: `500 Internal Server Error` (błąd wewnętrzny serwera/skryptu PHP), `502 Bad Gateway`, `503 Service Unavailable`. | Gdy w pakiecie XAMPP (Apache + PHP) skrypt PHP zawiera błąd krytyczny lub na serwerze brakuje uprawnień do katalogu, przeglądarka otrzymuje odpowiednio kod `500` lub `403`, a gdy wpiszemy błędną nazwę pliku w pasku adresu lub w atrybucie `action` formularza — kod `404`. | A) Kod 404 oznacza błąd wewnętrzny skryptu PHP po stronie serwera, a kod 500 oznacza nieistniejący adres URL; B) Kod 403 oznacza przekierowanie na inną stronę, a kod 301 oznacza błąd autoryzacji; C) Kody z grupy 4xx oznaczają awarię sprzętową serwera bazy danych; D) Klasy kodów HTTP: **2xx (Sukces)**: `200 OK` (żądanie wykonane pomyślnie), `201 Created`; **3xx (Przekierowania)**: `301 Moved Permanently` (stałe przekierowanie), `302 Found` (tymczasowe przekierowanie), `304 Not Modified` (pobrano z pamięci podręcznej przeglądarki); **4xx (Błąd po stronie klienta)**: `400 Bad Request`, `401 Unauthorized` (brak uwierzytelnienia), `403 Forbidden` (brak uprawnień dostępu do zasobu mimo znanego żądania), `404 Not Found` (nie znaleziono zasobu pod podanym URL); **5xx (Błąd po stronie serwera)**: `500 Internal Server Error` (błąd wewnętrzny serwera/skryptu PHP), `502 Bad Gateway`, `503 Service Unavailable`. ✓ |
| 28 | Jak w SQL tworzyć widoki (`CREATE VIEW`), podzapytania (`Subqueries`) oraz łączyć wyniki dwóch zapytań operatorem `UNION` vs `UNION ALL`? | **Widok (`VIEW`)** to zapisane w bazie nazwane zapytanie `SELECT` zachowujące się jak wirtualna tabela: `CREATE VIEW widok_aktywnych AS SELECT imie, nazwisko FROM klienci WHERE aktywny = 1;`. **Podzapytanie** to zapytanie zagnieżdżone w nawiasach wewnątrz innego zapytania (np. `SELECT nazwa, cena FROM towary WHERE cena > (SELECT AVG(cena) FROM towary);`). Operator **`UNION`** łączy wyniki dwóch zapytań (o tej samej liczbie i zgodnych typach kolumn) i **usuwa duplikaty wierszy**, natomiast **`UNION ALL`** łączy wyniki bez usuwania duplikatów (działa szybciej). | W zadaniach egzaminacyjnych INF.03 podzapytania są niezbędne wtedy, gdy chcemy wypisać wiersze o wartości maksymalnej/minimalnej lub większej od średniej bez użycia `LIMIT 1`, np. `SELECT imie, pensja FROM pracownicy WHERE pensja = (SELECT MAX(pensja) FROM pracownicy);`. | A) Operator UNION pozostawia wszystkie zduplikowane wiersze, natomiast UNION ALL usuwa duplikaty; B) Widok utworzony przez CREATE VIEW kopiuje fizycznie wszystkie dane do nowej tabeli na dysku i nie widzi późniejszych zmian w tabeli źródłowej; C) W zapytaniach łączonych operatorem UNION liczba kolumn w pierwszym i drugim SELECT może być dowolnie różna; D) **Widok (`VIEW`)** to zapisane w bazie nazwane zapytanie `SELECT` zachowujące się jak wirtualna tabela: `CREATE VIEW widok_aktywnych AS SELECT imie, nazwisko FROM klienci WHERE aktywny = 1;`. **Podzapytanie** to zapytanie zagnieżdżone w nawiasach wewnątrz innego zapytania (np. `SELECT nazwa, cena FROM towary WHERE cena > (SELECT AVG(cena) FROM towary);`). Operator **`UNION`** łączy wyniki dwóch zapytań (o tej samej liczbie i zgodnych typach kolumn) i **usuwa duplikaty wierszy**, natomiast **`UNION ALL`** łączy wyniki bez usuwania duplikatów (działa szybciej). ✓ |
| 29 | Czym różni się operator porównania luźnego `==` od operatora porównania ścisłego `===` w językach JavaScript oraz PHP i jak działają pętle `for`, `while`, `do...while` oraz `foreach`? | Operator `==` porównuje same wartości po wykonaniu niejawnej konwersji typów (koercji, np. `5 == "5"` daje `true`, `0 == false` daje `true`), natomiast operator ścisłego porównania **`===`** sprawdza zarówno **wartość, jak i typ danych** bez konwersji (`5 === "5"` daje `false`, podobnie `!==`). Pętla `while` sprawdza warunek przed pierwszym obrotem (może wykonać się 0 razy), a `do { ... } while (warunek);` sprawdza warunek na końcu (wykona się **co najmniej 1 raz**). W PHP pętla `foreach ($tablica as $klucz => $wartosc)` służy do wygodnej iteracji po tablicach. | W języku PHP wszystkie nazwy zmiennych zaczynają się od znaku dolara `$` (np. `$liczba = 10;`), a operatorem łączenia (konkatenacji) ciągów znaków w PHP jest **kropka `.`** (np. `echo "Wynik: " . $wynik . " zł";`), podczas gdy w JavaScript do łączenia napisów służy plus `+` lub literały szablonowe `` `Wynik: ${wynik} zł` ``! | A) Wyrażenie 5 === "5" w JavaScript i PHP zwraca wartość true, ponieważ obie strony reprezentują piątkę; B) Pętla while zawsze wykonuje swoje ciało przynajmniej jeden raz, nawet gdy warunek od początku jest fałszywy; C) Operator `==` porównuje same wartości po wykonaniu niejawnej konwersji typów (koercji, np. `5 == "5"` daje `true`, `0 == false` daje `true`), natomiast operator ścisłego porównania **`===`** sprawdza zarówno **wartość, jak i typ danych** bez konwersji (`5 === "5"` daje `false`, podobnie `!==`). Pętla `while` sprawdza warunek przed pierwszym obrotem (może wykonać się 0 razy), a `do { ... } while (warunek);` sprawdza warunek na końcu (wykona się **co najmniej 1 raz**). W PHP pętla `foreach ($tablica as $klucz => $wartosc)` służy do wygodnej iteracji po tablicach. ✓; D) W języku PHP zmienne deklaruje się słowem kluczowym let lub const bez znaku dolara $ |
| 30 | Jak w systemie MySQL/MariaDB utworzyć nowego użytkownika, nadać mu uprawnienia za pomocą polecenia `GRANT` oraz odebrać uprawnienia za pomocą `REVOKE`? | Tworzenie użytkownika: `CREATE USER 'anna'@'localhost' IDENTIFIED BY 'Haslo123!';`. Nadawanie uprawnień: `GRANT SELECT, INSERT, UPDATE ON sklep.* TO 'anna'@'localhost';` (lub wszystkie uprawnienia do jednej tabeli: `GRANT ALL PRIVILEGES ON sklep.towary TO 'anna'@'localhost';`). Odbieranie uprawnień: `REVOKE UPDATE ON sklep.* FROM 'anna'@'localhost';`. Usuwanie konta użytkownika: `DROP USER 'anna'@'localhost';`. | Zwróć uwagę na przyimki w języku DCL sprawdzane na egzaminie INF.03: `GRANT ... ON baza.tabela **TO** 'user'@'host'`, natomiast `REVOKE ... ON baza.tabela **FROM** 'user'@'host'`! | A) Uprawnienia nadaje się poleceniem ALLOW SELECT ON sklep.* FOR 'anna'@'localhost', a odbiera poleceniem DENY; B) Zapis ON *.sklep oznacza wszystkie tabele w bazie danych o nazwie sklep; C) Tworzenie użytkownika: `CREATE USER 'anna'@'localhost' IDENTIFIED BY 'Haslo123!';`. Nadawanie uprawnień: `GRANT SELECT, INSERT, UPDATE ON sklep.* TO 'anna'@'localhost';` (lub wszystkie uprawnienia do jednej tabeli: `GRANT ALL PRIVILEGES ON sklep.towary TO 'anna'@'localhost';`). Odbieranie uprawnień: `REVOKE UPDATE ON sklep.* FROM 'anna'@'localhost';`. Usuwanie konta użytkownika: `DROP USER 'anna'@'localhost';`. ✓; D) Polecenie DROP USER usuwa wszystkie tabele w bazie danych, które zostały utworzone przez tego użytkownika |
| 31 | Czym różni się pozycjonowanie elementów w CSS3: `position: static`, `relative`, `absolute`, `fixed` oraz `sticky`? | `static` (domyślne): element w normalnym przepływie dokumentu (właściwości `top`, `left`, `z-index` nie działają). `relative`: element przesunięty względem swojej własnej pierwotnej pozycji, ale nadal zajmuje swoje pierwotne miejsce w układzie. `absolute`: element wyjęty z normalnego przepływu i pozycjonowany względem najbliższego przodka mającego pozycję inną niż `static` (lub względem `<html>`, jeśli takiego przodka brak). `fixed`: wyjęty z przepływu i przytwierdzony na stałe względem okna przeglądarki (viewportu — nie przesuwa się przy przewijaniu strony). `sticky`: zachowuje się jak `relative` do momentu osiągnięcia progu przewijania (np. `top: 0`), po czym przykleja się jak `fixed`. | Aby wypozycjonować element potomny (`position: absolute; right: 10px; bottom: 10px;`) wewnątrz konkretnego kontenera nadrzędnego, temu kontenerowi nadrzędnemu nadaje się właściwość **`position: relative;`**. | A) position: absolute pozycjonuje element zawsze względem okna przeglądarki i blokuje jego przewijanie; B) Właściwość z-index określająca kolejność nakładania warstw działa również na elementach z domyślnym position: static; C) Element z position: relative zwalnia zajmowane przez siebie miejsce w dokumencie tak samo jak position: absolute; D) `static` (domyślne): element w normalnym przepływie dokumentu (właściwości `top`, `left`, `z-index` nie działają). `relative`: element przesunięty względem swojej własnej pierwotnej pozycji, ale nadal zajmuje swoje pierwotne miejsce w układzie. `absolute`: element wyjęty z normalnego przepływu i pozycjonowany względem najbliższego przodka mającego pozycję inną niż `static` (lub względem `<html>`, jeśli takiego przodka brak). `fixed`: wyjęty z przepływu i przytwierdzony na stałe względem okna przeglądarki (viewportu — nie przesuwa się przy przewijaniu strony). `sticky`: zachowuje się jak `relative` do momentu osiągnięcia progu przewijania (np. `top: 0`), po czym przykleja się jak `fixed`. ✓ |
| 32 | Jak w języku JavaScript pobrać referencję do elementu DOM, odczytać wartość wpisaną przez użytkownika do pola formularza (`<input>`, `<select>`) i wstawić wynik do akapitu lub bloku `<div>`? | Element pobiera się metodą `document.getElementById('id')` lub `document.querySelector('#id')`. Wartość z pola formularza (`<input>`, `<select>`, `<textarea>`) odczytuje się przez właściwość `.value` (a dla pola wyboru `<input type="checkbox">` lub `type="radio"` stan zaznaczenia sprawdza się przez `.checked` zwracające `true`/`false`). Wynik do elementu HTML (`<p>`, `<div>`, `<span>`) zapisuje się przez `.innerHTML = ...` (interpretuje znaczniki HTML) lub `.textContent = ...` / `.innerText = ...` (czysty tekst). | Bardzo ważna pułapka w JavaScript na egzaminie INF.03: `element.value` ZAWSZE zwraca ciąg znaków (`string`)! Dlatego przed dodawaniem dwóch liczb z pól formularza należy skonwertować je funkcją `Number(pole.value)`, `parseInt(pole.value, 10)` lub `parseFloat(pole.value)` — inaczej operator `+` wykona konkatenację napisów (`"2" + "3" = "23"`)! | A) Wartość pola <input> odczytuje się właściwością .innerHTML, a zawartość bloku <div> właściwością .value; B) Element pobiera się metodą `document.getElementById('id')` lub `document.querySelector('#id')`. Wartość z pola formularza (`<input>`, `<select>`, `<textarea>`) odczytuje się przez właściwość `.value` (a dla pola wyboru `<input type="checkbox">` lub `type="radio"` stan zaznaczenia sprawdza się przez `.checked` zwracające `true`/`false`). Wynik do elementu HTML (`<p>`, `<div>`, `<span>`) zapisuje się przez `.innerHTML = ...` (interpretuje znaczniki HTML) lub `.textContent = ...` / `.innerText = ...` (czysty tekst). ✓; C) Metoda document.getElementsByClassName('klasa') zwraca pojedynczy element, na którym można bezpośrednio wywołać .innerHTML; D) Właściwość .value na polu <input type="number"> zwraca zawsze zmienną typu number, a nie string |

---
Study this deck interactively with FSRS-6 spaced repetition, audio review, and multiple-choice mode at [Flashcards World](https://flashcards.world/flashcards/sets/ed2b8431-5bbc-47ce-a34c-2dcfb34cc5da/).