Teoria do egzaminu INF.03

Kurs przygotowuje do części pisemnej kwalifikacji INF.03 „Tworzenie i administrowanie stronami i aplikacjami internetowymi oraz bazami danych”. Przechodzi przez wszystkie działy, z których CKE układa pytania, i w każdym daje do rozwiązania prawdziwe pytania egzaminacyjne z objaśnieniami.

Jak wygląda część pisemna

Wynik części pisemnej to tylko połowa egzaminu. Część praktyczna (strona z HTML, CSS, JavaScriptem, PHP i bazą danych) ma osobny próg 75%. Teoria jednak bardzo pomaga w praktyce: te same znaczniki, właściwości CSS i polecenia SQL pojawiają się w obu częściach.

Z czego są pytania

Na podstawie ponad 2600 pytań z bazy egzaminacyjnej INF.03 widać, które działy pojawiają się najczęściej. Kolejność lekcji odpowiada mniej więcej ich wadze:

Jak korzystać z kursu

• Przeczytaj lekcję. Ramki „Na egzaminie” pokazują pułapki, na które CKE łapie najczęściej.
• Odpowiedz na pytania „Sprawdź się”. Są krótkie i dotyczą tylko tej lekcji.
• Rozwiąż blok „Pytania z egzaminów CKE” na końcu lekcji. Po złej odpowiedzi zobaczysz objaśnienie, dlaczego poprawna jest inna. Możesz próbować do skutku: pytanie zalicza się, gdy trafisz.
• Postęp widać w górnym pasku i przy każdej lekcji w spisie. Zapisuje się tylko w tej przeglądarce.
• Na końcu rozwiąż egzamin próbny w pełnej bazie pytań INF.03: 40 losowych pytań, 60 minut.

Wskazówka. Na egzaminie najpierw odpowiedz na pytania, które znasz od razu. Do trudnych wróć na końcu. Nie zostawiaj pustych odpowiedzi, bo za błędną nie ma punktów ujemnych.

Struktura dokumentu i podstawowe znaczniki

HTML opisuje treść strony: co jest nagłówkiem, co akapitem, co listą. Wygląd to zadanie CSS. Na egzaminie liczy się znajomość szkieletu dokumentu, roli poszczególnych znaczników i zasad poprawnego zapisu.

Szkielet dokumentu HTML5

<!DOCTYPE html>
<html lang="pl">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="description" content="Opis strony dla wyszukiwarek">
  <title>Tytuł na karcie przeglądarki</title>
  <link rel="stylesheet" href="styl.css">
</head>
<body>
  <h1>Widoczna treść strony</h1>
</body>
</html>

• <!DOCTYPE html> mówi przeglądarce, że dokument jest w HTML5. To nie jest znacznik, tylko deklaracja typu dokumentu.
• <head> zawiera informacje o stronie, których nie widać w treści: kodowanie, tytuł, opis, podpięte style i skrypty.
• <title> wyświetla się na pasku tytułu (karcie) przeglądarki i w wynikach wyszukiwania.
• <meta charset="UTF-8"> ustawia kodowanie znaków, dzięki czemu polskie litery wyświetlają się poprawnie.
• <meta name="viewport"> sprawia, że strona dopasowuje się do szerokości ekranu telefonu.
• <meta name="description"> to opis zawartości strony dla wyszukiwarek, a keywords to słowa kluczowe.

Na egzaminie. Pytanie „którego znacznika nie umieszcza się w <head>” ma zwykle jako odpowiedź znacznik treści, np. <h2>, <p> albo <img>. W sekcji head są tylko title, meta, link, style, script i base.

Znaczniki tekstu

Na egzaminie. <strong> wygląda jak <b>, a <em> jak <i>. Różnica jest znaczeniowa: strong i em mówią, że tekst jest ważny, co odczytują czytniki ekranu i wyszukiwarki. Pogrubienie w CSS to font-weight: bold, kursywa to font-style: italic.

Elementy blokowe i liniowe

Elementy blokowe (div, p, h1–h6, ul, table, form, section) zaczynają się od nowej linii i zajmują całą szerokość. Elementy liniowe (span, a, img, strong, em, input) układają się w tekście jeden za drugim. <div> i <span> nic nie znaczą: to pojemniki, do których dopina się styl przez id albo class.

id musi być unikalny, czyli występować w dokumencie tylko raz. class można nadać wielu elementom, a jeden element może mieć kilka klas: class="ramka czerwona".

Znaczniki semantyczne HTML5

Wyglądają jak zwykły div, ale mówią, czym jest dana część strony. Pomaga to wyszukiwarkom i osobom korzystającym z czytników ekranu.

Encje, czyli znaki specjalne

Znaki, które HTML traktuje jako składnię, trzeba zapisać encją: < to <, > to >, & to &, " to cudzysłów,   to twarda spacja (nie łamie linii), © to ©.

Walidacja

Walidacja to sprawdzenie zgodności kodu ze standardem, zwykle walidatorem W3C (validator.w3.org). Typowe błędy, które pokazuje:

• niezamknięty znacznik albo zła kolejność zamykania: <p><b>tekst</p></b> (znaczniki zamyka się w odwrotnej kolejności niż otwiera),
• brak cudzysłowu zamykającego wartość atrybutu,
• brak atrybutu alt w <img>,
• powtórzony id, znacznik blokowy wewnątrz <p>, znacznik w złej sekcji.

Na egzaminie. Walidacja nie sprawdza wyglądu ani działania strony, tylko poprawność zapisu. Do CSS jest osobny walidator, który wyłapie np. brak średnika albo nieistniejącą właściwość.

Odnośniki, obrazy, listy i tabele

Te cztery elementy pojawiają się w każdej stronie z części praktycznej i w wielu pytaniach teoretycznych. Najczęściej trzeba rozpoznać, co wyświetli dany kod.

Odnośniki <a>

<a href="https://example.com">Strona zewnętrzna</a>
<a href="kontakt.html">Plik w tym samym folderze</a>
<a href="#cennik">Przewiń do elementu o id="cennik"</a>
<a href="mailto:szkola@example.com">Napisz e-mail</a>
<a href="cennik.pdf" target="_blank">Otwórz w nowej karcie</a>

• href to adres, do którego prowadzi odnośnik. Adres bezwzględny zawiera protokół i domenę, względny jest liczony od bieżącego pliku (../ to folder wyżej).
• href="#id" przewija stronę do elementu o tym identyfikatorze (kotwica). Sam # przewija na górę strony.
• target="_blank" otwiera stronę w nowym oknie lub karcie, a _self (domyślnie) w tym samym.
• rel="nofollow" to informacja dla robotów wyszukiwarek, żeby nie podążały za linkiem.

Obrazy <img>

<img src="obrazy/pies.jpg" alt="Pies na łące" width="300" height="200">

• src wskazuje plik graficzny.
• alt to tekst alternatywny. Wyświetla się, gdy obraz się nie wczyta, i odczytują go czytniki ekranu dla osób niewidomych. Bez niego walidacja zgłasza błąd.
• title to dymek po najechaniu myszą. To nie to samo co alt.
• <img> nie ma znacznika zamykającego.

Na egzaminie. „Co się stanie, gdy plik graficzny nie istnieje?” Przeglądarka pokaże w jego miejscu tekst z alt. „Który atrybut uzupełnić, by strona była dostępna dla niewidomych?” Również alt.

Listy

<ol>                    <!-- numerowana: 1. 2. 3. -->
  <li>punkt 1</li>
  <li>punkt 2
    <ul>                <!-- zagnieżdżona punktowana -->
      <li>podpunkt</li>
    </ul>
  </li>
</ol>
<dl>                    <!-- lista definicji -->
  <dt>HTML</dt>  <dd>język znaczników</dd>
</dl>

<ol> to lista uporządkowana (numerowana), <ul> nieuporządkowana (punktowana), <li> to element każdej z nich. Lista zagnieżdżona musi być wewnątrz <li>. Atrybut type w ol zmienia numerację (A, a, I, i), a start ustawia numer pierwszego punktu.

Tabele

<table border="1">
  <tr><th>Imię</th><th>Wynik</th></tr>
  <tr><td>Ala</td><td rowspan="2">zdane</td></tr>
  <tr><td>Ola</td></tr>
  <tr><td colspan="2">Komórka na dwie kolumny</td></tr>
</table>

• <tr> to wiersz, <td> komórka, <th> komórka nagłówkowa (domyślnie pogrubiona i wyśrodkowana).
• colspan łączy komórki w poziomie (zajmuje kilka kolumn), rowspan w pionie (kilka wierszy).
• Liczba kolumn to liczba komórek w wierszu, licząc colspan. Liczba wierszy to liczba <tr>.
• <caption> to podpis tabeli, a <thead>, <tbody> i <tfoot> grupują wiersze.

Na egzaminie. Przy rysunku tabeli policz najpierw kolumny w najszerszym wierszu. Komórka z rowspan="2" „zabiera” miejsce w następnym wierszu, więc ten wiersz ma o jedną <td> mniej.

Formularze

Formularz zbiera dane od użytkownika i wysyła je do skryptu na serwerze, najczęściej w PHP. Na egzaminie trzeba znać typy pól, rolę atrybutów i różnicę między GET a POST.

Budowa formularza

<form action="zapisz.php" method="post">
  <label for="imie">Imię:</label>
  <input type="text" id="imie" name="imie" placeholder="np. Jan" required>
  <input type="password" name="haslo" maxlength="20">
  <input type="number" name="wiek" min="1" max="120">
  <input type="radio" name="plec" value="k"> K
  <input type="radio" name="plec" value="m"> M
  <input type="checkbox" name="zgoda" checked> Zgoda
  <select name="miasto">
    <option value="plock" selected>Płock</option>
    <option value="torun">Toruń</option>
  </select>
  <textarea name="uwagi" rows="4" cols="40"></textarea>
  <input type="submit" value="Wyślij">  <input type="reset" value="Wyczyść">
</form>

Atrybuty, o które pyta CKE

Przyciski radio z tym samym name tworzą grupę, w której można zaznaczyć tylko jeden. checkbox pozwala zaznaczyć dowolnie wiele. Typ password ukrywa wpisywane znaki kropkami. HTML5 dodał też typy email, number, date, color, range, url, tel, które same sprawdzają format.

GET czy POST

Na egzaminie. Jeśli w pytaniu widać adres ze znakiem ? i parami nazwa=wartość, formularz użył metody GET. POST nie jest sam w sobie szyfrowany. Największe bezpieczeństwo daje POST przez HTTPS.

Walidacja danych

Walidacja to sprawdzenie, czy wpisane dane spełniają reguły: pole niepuste, poprawny e-mail, liczba w zakresie. Po stronie klienta robi to HTML5 (required, pattern, typy pól) albo JavaScript, zanim dane wyjdą z przeglądarki. Po stronie serwera robi to PHP. Serwer zawsze musi sprawdzić dane jeszcze raz, bo kontrolę w przeglądarce łatwo obejść.

Selektory, kaskada i sposoby dołączania stylów

CSS (kaskadowe arkusze stylów) oddziela wygląd strony od jej treści. Jedna reguła może zmienić wygląd wszystkich akapitów w całym serwisie. Najwięcej pytań z CSS dotyczy tego, który element zostanie sformatowany danym selektorem.

Budowa reguły

h1 { color: blue; font-size: 24px; }
/* selektor { właściwość: wartość; właściwość: wartość; } */

h1 to selektor, color to właściwość, blue to wartość, a całość w nawiasach klamrowych to blok deklaracji. Komentarz w CSS zapisuje się tylko jako /* … */.

Trzy sposoby dołączenia stylów

Selektory

Pseudoklasy i pseudoelementy

Na egzaminie. h1::first-letter { color: red } koloruje tylko pierwszą literę każdego nagłówka h1. p::first-line dotyczy pierwszej linii każdego akapitu. Kolejność reguł dla linków zapamiętaj jako LoVe HAte: :link, :visited, :hover, :active.

Kaskada i dziedziczenie

Gdy kilka reguł ustawia tę samą właściwość tego samego elementu, wygrywa:

1. reguła z !important,
2. styl o wyższej specyficzności: lokalny style="" > #id > .klasa i pseudoklasy > znacznik,
3. przy równej specyficzności reguła zapisana później.

Część właściwości jest dziedziczona przez elementy wewnątrz: color, font-*, text-align, line-height. Właściwości pudełka (margin, padding, border, width, background) nie są dziedziczone. Dlatego styl czcionki ustawiony dla body obowiązuje w całym dokumencie.

Tekst, kolory, jednostki i tło

To najliczniejsza grupa pytań z CSS. Trzeba rozpoznać, co robi właściwość, przeliczyć kolor między zapisami i wiedzieć, która jednostka jest względna.

Czcionka i tekst

Na egzaminie. color zmienia kolor tekstu, a nie tła. Tło to background-color. Pytania często mieszają te dwie właściwości w odpowiedziach.

Zapis kolorów

Na ekranie kolor to mieszanina trzech składowych: czerwonej (R), zielonej (G) i niebieskiej (B), każda od 0 do 255. Ten sam kolor można zapisać na kilka sposobów:

Przeliczanie szesnastkowe ↔ dziesiętne

Zapis #RRGGBB to trzy liczby dwucyfrowe w systemie szesnastkowym (cyfry 0–9 i A–F, gdzie A=10 … F=15). Każdą parę przelicza się osobno: pierwsza cyfra × 16 + druga cyfra.

• #11FE07: 11 = 1·16+1 = 17, FE = 15·16+14 = 254, 07 = 7 → rgb(17, 254, 7)
• rgb(255, 16, 8): 255 = 15·16+15 = FF, 16 = 1·16+0 = 10, 8 = 08 → #FF1008
• #00FF00 = rgb(0, 255, 0) to zielony, #000000 czarny, a równe składowe (np. #808080) dają szarość.

Na egzaminie. Wystarczy sprawdzić jedną składową, która różni się między odpowiedziami. Przydatne pary: 10 = 0A, 16 = 10, 128 = 80, 200 = C8, 255 = FF.

Jednostki

Tło i listy

body {
  background-color: #EEE;
  background-image: url("tlo.png");
  background-repeat: repeat-y;      /* powtarzaj w pionie; repeat-x w poziomie, no-repeat raz */
  background-position: top right;
  background-attachment: fixed;     /* tło stoi w miejscu przy przewijaniu; scroll przewija się z treścią */
  background-size: cover;
}
ul { list-style-type: square; }     /* disc, circle, square, none; dla ol: decimal, lower-alpha, upper-roman */
ul { list-style-image: url("punkt.png"); }   /* własny obrazek jako punktor */

Model pudełkowy, pozycjonowanie i strona responsywna

Każdy element strony to prostokąt z treścią, wypełnieniem, ramką i marginesem. Pytania sprawdzają, co oznaczają skrócone zapisy marginesów, ile wynosi szerokość elementu i jak działają float oraz position.

Model pudełkowy

padding to odstęp wewnątrz ramki, między treścią a ramką. margin to odstęp na zewnątrz ramki, od sąsiednich elementów. Przy domyślnym box-sizing: content-box rzeczywista szerokość elementu to:

width + padding lewy i prawy + border lewy i prawy (+ margines, jeśli liczysz zajęte miejsce)

Przykład: width: 500px; padding: 20px; border: 10px solid; daje 500 + 2·20 + 2·10 = 560 px. Z box-sizing: border-box padding i ramka mieszczą się w podanym width.

Skrócone zapisy: kolejność zgodnie z ruchem wskazówek zegara

Na egzaminie. Kolejność to zawsze góra, prawo, dół, lewo (jak wskazówki zegara od godziny 12). Najczęstsza pułapka to zamiana prawego z dolnym. Pojedyncza strona to margin-top, padding-left itd.

display, float, position

Flexbox (display: flex) układa dzieci w rzędzie lub kolumnie (flex-direction), wyrównuje je (justify-content w osi głównej, align-items w poprzecznej) i pozwala im się zawijać (flex-wrap).

Strona responsywna (RWD)

@media (max-width: 600px) {
  nav, main { width: 100%; float: none; }   /* na wąskim ekranie bloki jeden pod drugim */
}

Zapytanie @media stosuje reguły tylko wtedy, gdy spełniony jest warunek, np. szerokość ekranu do 600 px. Razem z <meta name="viewport"> i szerokościami w procentach daje stronę, która dopasowuje się do telefonu, tabletu i komputera.

Grafika: modele barw, formaty i obróbka

Pytania z grafiki dotyczą różnicy między grafiką rastrową a wektorową, modeli barw, formatów plików i narzędzi edytorów takich jak GIMP czy Photoshop.

Rastrowa czy wektorowa

W programach wektorowych kształty łączy się operacjami logicznymi: suma (połączenie dwóch figur w jedną), różnica (wycięcie jednej z drugiej), część wspólna (iloczyn) i wykluczenie.

Modele barw

Na egzaminie. Ekran → RGB, druk → CMYK, stożek „barwa, nasycenie, jasność” → HSV. Przeliczanie rgb() na zapis szesnastkowy znajdziesz w lekcji 5.

Rozdzielczość i głębia koloru

• Rozdzielczość obrazu to liczba pikseli w poziomie i pionie, np. Full HD = 1920 × 1080, HD = 1280 × 720, 4K = 3840 × 2160.
• DPI / PPI (punkty / piksele na cal) to gęstość. Do druku stosuje się zwykle 300 dpi, do ekranu ok. 72–96 ppi.
• Głębia koloru to liczba bitów na piksel: 1 bit = 2 kolory, 8 bitów = 256 kolorów (np. GIF), 24 bity = ok. 16,7 mln kolorów (true color), 32 bity = 24 bity koloru + 8 bitów kanału alfa.
• Kanał alfa przechowuje przezroczystość każdego piksela. Ma go PNG (i GIF w uproszczonej formie: piksel albo całkiem przezroczysty, albo nie). JPG nie obsługuje przezroczystości.

Formaty plików graficznych

Kompresja stratna usuwa część informacji (plik mniejszy, jakość gorsza i nie da się jej odzyskać). Bezstratna pozwala odtworzyć dane co do bitu.

Narzędzia i operacje w edytorach rastrowych

Dźwięk, wideo i animacja

Ta część sprawdza podstawy fizyki dźwięku, cyfrowego zapisu dźwięku i obrazu ruchomego, formaty plików i znaczniki HTML5 <audio> i <video>.

Dźwięk

• Wysokość dźwięku zależy od częstotliwości drgań (Hz). Człowiek słyszy ok. 20 Hz – 20 kHz.
• Głośność zależy od amplitudy drgań i mierzy się ją w decybelach (dB).
• Barwa zależy od składu harmonicznych, dzięki niej odróżniamy instrumenty.

Zamiana dźwięku analogowego na cyfrowy to próbkowanie (pomiar fali wiele razy na sekundę) i kwantyzacja (zapis każdej próbki liczbą o określonej liczbie bitów).

Rozmiar nieskompresowanego dźwięku: częstotliwość × bity × kanały × czas. Minuta jakości CD: 44 100 · 16 · 2 · 60 = 84 672 000 bitów ≈ 10 MB.

Edytor dźwięku to np. Audacity (bezpłatny). Typowe operacje: przycinanie, normalizacja (ustawienie głośności na zadany poziom), odszumianie, wyciszanie (fade in / fade out), zmiana tempa i wysokości, efekty echa.

Wideo i animacja

• Ruch powstaje z szybko wyświetlanych klatek. Obraz wydaje się płynny od ok. 24–30 klatek na sekundę (fps). Kino używa 24 fps, telewizja 25 lub 30.
• Kontener (MP4, AVI, MKV, MOV, WebM, OGG) przechowuje obraz, dźwięk i napisy. Kodek (H.264, H.265/HEVC, VP9, AV1) kompresuje sam obraz.
• Prostą animację zapisze GIF (wiele klatek w jednym pliku, bez dźwięku). Animacje na stronach robi się dziś w CSS (@keyframes, transition) albo JavaScripcie.
• Montaż wideo: Shotcut, OpenShot, DaVinci Resolve, Adobe Premiere.

Multimedia na stronie

<video width="640" controls autoplay muted loop poster="kadr.jpg">
  <source src="film.mp4" type="video/mp4">
  <source src="film.webm" type="video/webm">
  Twoja przeglądarka nie obsługuje wideo.
</video>
<audio src="muzyka.mp3" controls></audio>

• controls pokazuje przyciski odtwarzania, autoplay odtwarza od razu, muted wycisza, loop powtarza, poster to obraz przed startem.
• Kilka <source> pozwala podać ten sam film w różnych formatach. Przeglądarka weźmie pierwszy, który umie odtworzyć. Tekst wewnątrz znacznika zobaczą tylko przeglądarki bez obsługi HTML5.
• Formaty wideo w HTML5: MP4, WebM, Ogg. Formaty audio: MP3, WAV, Ogg.
• Starsze sposoby osadzania to <embed> i <object> (np. animacje Flash .swf, dziś nieobsługiwane).

JavaScript: składnia, DOM i zdarzenia

JavaScript działa w przeglądarce (po stronie klienta) i ożywia stronę: reaguje na kliknięcia, zmienia treść i style, sprawdza formularze. Pytania pokazują krótki kod i pytają, co wypisze albo co zmieni na stronie.

Zmienne i typy

let wiek = 17;               // number (liczby całkowite i ułamki to ten sam typ)
const imie = "Ala";          // string; const nie da się przypisać ponownie
var zdane = true;            // boolean; var to starszy sposób deklaracji
let lista = [3, 5, 8];       // tablica, indeksy od 0: lista[0] to 3
let osoba = { imie: "Ala", wiek: 17 };   // obiekt: osoba.imie
typeof wiek                  // "number"

JavaScript ma typowanie dynamiczne: typ zależy od przypisanej wartości. Wartość z pola formularza jest zawsze tekstem, więc przed liczeniem trzeba ją zamienić: parseInt("12") daje liczbę całkowitą 12, parseFloat("3.5") liczbę rzeczywistą, a Number() dowolną liczbę.

Operatory

Na egzaminie. Pojedynczy = to przypisanie, nie porównanie. if (x = 5) przypisuje 5 i warunek jest zawsze prawdziwy. To częsty „błąd logiczny” w pytaniach.

Instrukcje sterujące

if (ocena >= 2) { wynik = "zdane"; } else { wynik = "niezdane"; }
for (let i = 0; i < 5; i++) { suma += i; }        // 5 obrotów: i = 0, 1, 2, 3, 4
while (n > 0) { n--; }
do { … } while (warunek);                            // wykona się co najmniej raz
switch (dzien) { case 1: … break; default: … }
function pole(a, b) { return a * b; }                 // funkcja z wynikiem

Okna dialogowe i wypisywanie

• alert("tekst") – okno z komunikatem i przyciskiem OK.
• prompt("Podaj imię", "Jan") – okno z polem do wpisania; zwraca wpisany tekst, drugi argument to wartość domyślna.
• confirm("Na pewno?") – okno OK / Anuluj; zwraca true albo false.
• document.write("tekst") – wpisuje tekst do dokumentu, console.log() – wypisuje w konsoli przeglądarki (F12).

MessageBox(), echo czy print() nie są funkcjami JavaScriptu w przeglądarce.

DOM, czyli zmiany na stronie

let el = document.getElementById("wynik");    // element o id="wynik"
el.innerHTML = "<b>Gotowe</b>";              // zmiana zawartości (z interpretacją znaczników)
el.style.color = "red";                       // zmiana stylu: właściwości CSS z myślnikiem piszemy camelCase
el.style.backgroundColor = "yellow";
document.getElementById("pole").value;        // wartość pola formularza (tekst)
document.getElementById("obraz").src = "b.png";   // podmiana obrazka
document.querySelector(".menu");              // pierwszy element pasujący do selektora CSS

Zdarzenia

<button onclick="policz()">Oblicz</button>
<!-- albo w skrypcie: -->
document.getElementById("btn").addEventListener("click", policz);

Napisy, tablice, Math, Date

• tekst.length – długość; tekst.substring(2, 6) – znaki od indeksu 2 do 5; toUpperCase(), indexOf("a"), split(","), replace("a", "b").
• tab.push(x) dodaje na końcu, tab.pop() usuwa ostatni, tab.length to liczba elementów, tab.sort() sortuje.
• Math.random() – liczba z przedziału [0, 1); Math.floor() zaokrągla w dół, Math.round() do najbliższej, Math.ceil() w górę; Math.max(), Math.pow(), Math.sqrt().
• new Date() – bieżąca data; getFullYear(), getMonth() (miesiące od 0), getDate(), getDay() (0 = niedziela).

PHP: język po stronie serwera

Skrypt PHP wykonuje się na serwerze, a do przeglądarki trafia już tylko wynik w postaci HTML. Dlatego użytkownik nie widzi kodu PHP w źródle strony. Pytania dotyczą składni, tablic, pętli, funkcji wbudowanych i danych z formularzy.

Składnia

<?php
  $imie = "Ala";               // zmienna zaczyna się od $
  $wiek = 17;
  echo "Cześć, $imie!";        // w cudzysłowie podwójnym zmienna jest podstawiana
  echo 'Cześć, $imie!';        // w pojedynczym nie: wypisze dosłownie $imie
  echo "Masz " . $wiek . " lat";   // kropka łączy teksty (konkatenacja)
  # komentarz jednoliniowy, /* komentarz blokowy */
?>

• Każda instrukcja kończy się średnikiem. Nazwy zmiennych rozróżniają wielkość liter.
• Typy: int (całkowite), float (zmiennoprzecinkowe), string, bool, array, null. Typ zależy od wartości (typowanie dynamiczne).
• Wypisywanie: echo, print, printf(); podgląd zmiennej: var_dump(), print_r().
• phpinfo(); wypisuje pełną konfigurację PHP na serwerze.
• include / require dołączają inny plik. Przy braku pliku include tylko ostrzega, require przerywa skrypt.

Na egzaminie. Łączenie tekstów w PHP to kropka (.), a w JavaScripcie plus. Operator .= dokleja tekst do zmiennej.

Tablice

$liczby = array(4, 7, 9);          // lub [4, 7, 9]; indeksy od 0
echo $liczby[1];                     // 7
$osoba = array("imie" => "Jan", "wiek" => 30);   // tablica asocjacyjna: klucz => wartość
echo $osoba["imie"];                 // Jan
foreach ($osoba as $klucz => $wartosc) { echo "$klucz: $wartosc<br>"; }
count($liczby);                      // liczba elementów: 3

Sortowanie: sort() rosnąco według wartości, rsort() malejąco, asort() według wartości z zachowaniem kluczy, ksort() według kluczy.

Pętle i warunki

for ($i = 1; $i <= 5; $i++) { echo $i; }     // 12345
while ($x < 10) { $x += 3; }
foreach ($tablica as $element) { … }          // każdy element tablicy po kolei
if ($a > 0 && $a < 10) { … } elseif ($a == 0) { … } else { … }

Funkcje wbudowane, o które pyta CKE

Dane z formularza, sesje, ciasteczka

• $_GET['pole'] i $_POST['pole'] – dane z formularza wysłanego odpowiednią metodą; $_REQUEST – z obu.
• $_SESSION – dane zapamiętane na serwerze dla jednego użytkownika między stronami. Wymaga session_start(); na początku skryptu, kończy się session_destroy().
• setcookie("nazwa", "wartosc", time() + 3600); – ciasteczko zapisane w przeglądarce (tu na godzinę); odczyt przez $_COOKIE['nazwa'].
• $_SERVER – informacje o serwerze i żądaniu, $_FILES – przesłane pliki.

Połączenie PHP z bazą danych

W części praktycznej strona prawie zawsze pobiera dane z bazy. Pytania teoretyczne sprawdzają kolejność kroków i rolę funkcji z biblioteki mysqli.

Cztery kroki

<?php
// 1. połączenie: serwer, użytkownik, hasło, nazwa bazy
$polaczenie = mysqli_connect("localhost", "root", "", "szkola");
if (!$polaczenie) { die("Błąd połączenia z serwerem SQL"); }

// 2. wysłanie zapytania
$wynik = mysqli_query($polaczenie, "SELECT imie, nazwisko FROM uczniowie");

// 3. odczyt wyniku wiersz po wierszu
while ($wiersz = mysqli_fetch_array($wynik)) {
    echo $wiersz["imie"] . " " . $wiersz[1] . "<br>";
}

// 4. zamknięcie połączenia
mysqli_close($polaczenie);
?>

Funkcje mysqli

Funkcje z przedrostkiem mysql_ (bez „i”) to stara, usunięta z PHP 7 biblioteka. Mogą pojawić się w starszych pytaniach: mysql_fetch_row działa tak samo jak mysqli_fetch_row. Nowocześniejszą alternatywą jest PDO.

Na egzaminie. mysqli_num_rows() ma sens tylko po SELECT, bo liczy wiersze wyniku. Po INSERT, UPDATE czy DELETE liczbę zmienionych wierszy daje mysqli_affected_rows(). W mysqli pierwszym argumentem mysqli_query jest połączenie, a drugim zapytanie.

Wstawianie danych z formularza

$imie = $_POST["imie"];
$sql = "INSERT INTO uczniowie (imie, klasa) VALUES ('$imie', '3A')";
mysqli_query($polaczenie, $sql);

Teksty w zapytaniu SQL muszą być w apostrofach. Wstawianie danych od użytkownika wprost do zapytania grozi atakiem SQL injection. Zabezpiecza przed nim mysqli_real_escape_string() albo zapytania przygotowane (mysqli_prepare, PDO). Więcej w lekcji 16.

Relacyjne bazy danych: pojęcia, klucze, normalizacja

Zanim napiszesz zapytanie, musisz wiedzieć, jak baza jest zbudowana. Pytania z teorii dotyczą słownictwa (krotka, encja, atrybut), kluczy, rodzajów relacji, normalizacji i transakcji.

Słownik

Klucze

• Klucz główny (podstawowy, PRIMARY KEY) jednoznacznie identyfikuje rekord: jest unikalny i nie może być pusty (NULL). Tabela ma jeden klucz główny, ale może on składać się z kilku pól (klucz złożony).
• Klucz główny często ma atrybut AUTO_INCREMENT: przy dodawaniu rekordu baza sama nadaje kolejną liczbę.
• Klucz obcy (FOREIGN KEY) to pole wskazujące na klucz główny w innej tabeli. Tworzy relację i pilnuje integralności referencyjnej: nie wstawisz wypożyczenia czytelnika, którego nie ma.
• Klucz kandydujący to każde pole (zestaw pól), które mogłoby być kluczem głównym; indeks przyspiesza wyszukiwanie po danym polu.

Relacje między tabelami

Normalizacja

Normalizacja to dzielenie tabel tak, aby usunąć redundancję (powtarzanie tych samych danych) i anomalie przy dodawaniu, zmianie i usuwaniu danych.

1. 1NF – każde pole zawiera jedną, niepodzielną wartość (nie „Jan, Anna” w jednej komórce), wiersze się nie powtarzają, jest klucz główny.
2. 2NF – 1NF i każde pole niekluczowe zależy od całego klucza głównego, a nie od jego części.
3. 3NF – 2NF i pola niekluczowe nie zależą od siebie nawzajem (brak zależności przechodnich), np. nazwa miasta nie zależy od kodu pocztowego w tej samej tabeli.

Transakcje i ACID

Transakcja to grupa operacji wykonywana w całości albo wcale, np. przelew: odjęcie z jednego konta i dodanie do drugiego. Polecenia: START TRANSACTION, COMMIT (zatwierdź), ROLLBACK (wycofaj). Cechy ACID:

Typy danych w MySQL

Zapytania wybierające: SELECT

SELECT to najczęstsze polecenie na egzaminie, w teorii i w praktyce. Pytania pokazują tabelę z kilkoma rekordami i zapytanie, a ty masz wskazać wynik. Rób to krok po kroku, w kolejności, w jakiej wykonuje się zapytanie.

Budowa zapytania

SELECT kolumny               -- 5. co pokazać
FROM tabela                  -- 1. z jakiej tabeli
WHERE warunek                -- 2. które wiersze
GROUP BY kolumna             -- 3. grupowanie
HAVING warunek_na_grupach    -- 4. które grupy
ORDER BY kolumna ASC|DESC    -- 6. sortowanie (ASC rosnąco – domyślnie, DESC malejąco)
LIMIT 3;                     -- 7. ile wierszy

• SELECT * – wszystkie kolumny; SELECT DISTINCT miasto – bez powtórzeń.
• SELECT cena * 1.23 AS brutto – wyliczona kolumna z nazwą (alias).
• Teksty i daty zapisuje się w apostrofach: WHERE miasto = 'Płock', WHERE data > '2024-01-01'.

Warunki w WHERE

Na egzaminie. LIKE '%a' to tekst kończący się na „a”, 'a%' zaczynający się od „a”, '%a%' zawierający „a” gdziekolwiek. W MySQL LIKE zwykle nie rozróżnia wielkości liter, więc '%kr%' pasuje też do „Krystyna”.

Funkcje agregujące i grupowanie

SELECT COUNT(*) FROM uczniowie;                    -- liczba wierszy
SELECT AVG(ocena), MAX(ocena), MIN(ocena), SUM(punkty) FROM wyniki;
SELECT klasa, COUNT(*) AS ilu FROM uczniowie GROUP BY klasa;            -- liczba uczniów w każdej klasie
SELECT klasa, AVG(ocena) FROM oceny GROUP BY klasa HAVING AVG(ocena) > 4;   -- tylko klasy ze średnią powyżej 4

• COUNT(*) liczy wiersze, COUNT(pole) liczy tylko wiersze z niepustym polem.
• WHERE filtruje wiersze przed grupowaniem, HAVING filtruje grupy po grupowaniu (można w nim użyć funkcji agregujących).
• Funkcje działające na pojedynczych wartościach: UPPER(), LOWER(), LENGTH(), CONCAT(), ROUND(), YEAR(), NOW().

Łączenie tabel: JOIN

SELECT filmy.tytul, rezyserzy.nazwisko
FROM filmy JOIN rezyserzy ON filmy.rezyserID = rezyserzy.id;

• Warunek ON łączy klucz obcy jednej tabeli z kluczem głównym drugiej.
• JOIN (= INNER JOIN) zwraca tylko pary, które do siebie pasują.
• LEFT JOIN zwraca wszystkie wiersze lewej tabeli, także bez pary (wtedy pola prawej to NULL). RIGHT JOIN odwrotnie.
• Starszy zapis bez JOIN: FROM filmy, rezyserzy WHERE filmy.rezyserID = rezyserzy.id.

Podzbiory języka SQL: DQL – zapytania (SELECT), DML – zmiana danych (INSERT, UPDATE, DELETE), DDL – struktura (CREATE, ALTER, DROP), DCL – uprawnienia (GRANT, REVOKE).

W algebrze relacji: selekcja to wybór wierszy (WHERE), projekcja to wybór kolumn (lista po SELECT), złączenie to JOIN.

Zmiana danych, struktura tabel i uprawnienia

Poza SELECT egzamin sprawdza polecenia, które zmieniają dane (DML), strukturę bazy (DDL) i uprawnienia użytkowników (DCL), a także kopie zapasowe i phpMyAdmin.

Zmiana danych (DML)

INSERT INTO uczniowie (imie, nazwisko, klasa) VALUES ('Jan', 'Nowak', '3A');
UPDATE produkty SET cena = cena * 0.9 WHERE kategoria = 'AGD';   -- obniżka o 10%
DELETE FROM mieszkancy WHERE status = 1;

Na egzaminie. UPDATE i DELETE bez WHERE zmieniają albo usuwają wszystkie rekordy tabeli. DELETE usuwa rekordy, a tabela zostaje. DROP TABLE usuwa całą tabelę ze strukturą, a TRUNCATE usuwa wszystkie rekordy naraz.

Struktura (DDL)

CREATE DATABASE szkola;
CREATE TABLE ksiazki (
  id INT PRIMARY KEY AUTO_INCREMENT,
  tytul VARCHAR(100) NOT NULL,
  cena DECIMAL(6,2) DEFAULT 0,
  autor INT,
  FOREIGN KEY (autor) REFERENCES autorzy(id)
);
ALTER TABLE ksiazki ADD rok YEAR;                 -- nowa kolumna
ALTER TABLE ksiazki MODIFY cena FLOAT;            -- zmiana typu kolumny
ALTER TABLE ksiazki CHANGE rok rok_wydania YEAR;  -- zmiana nazwy (i typu)
ALTER TABLE ksiazki DROP COLUMN rok_wydania;      -- usunięcie kolumny
ALTER TABLE uczniowie ADD PRIMARY KEY (id);
DROP TABLE ksiazki;                               -- usunięcie tabeli
CREATE VIEW tanie AS SELECT * FROM ksiazki WHERE cena < 20;   -- widok, czyli zapisane zapytanie

Użytkownicy i uprawnienia (DCL)

CREATE USER 'adam'@'localhost' IDENTIFIED BY 'Haslo1!';
GRANT SELECT, INSERT, UPDATE ON sklep.klienci TO 'adam'@'localhost';
GRANT ALL PRIVILEGES ON sklep.* TO 'admin'@'localhost' WITH GRANT OPTION;
REVOKE DELETE, UPDATE ON sklep.klienci FROM 'adam'@'localhost';
SHOW GRANTS FOR 'adam'@'localhost';
DROP USER 'adam'@'localhost';

• GRANT nadaje, REVOKE … FROM odbiera uprawnienia.
• sklep.* to wszystkie tabele bazy sklep, *.* to wszystkie bazy.
• WITH GRANT OPTION pozwala użytkownikowi przekazywać swoje uprawnienia innym.
• Uprawnienia do danych: SELECT, INSERT, UPDATE, DELETE. Do struktury: CREATE, ALTER, DROP, INDEX. Administracyjne: CREATE USER, GRANT OPTION.
• Role (CREATE ROLE) grupują uprawnienia, które potem nadaje się wielu użytkownikom naraz.

Na egzaminie. Przy kilku poleceniach GRANT i REVOKE dla kilku osób rozpisz sobie małą tabelkę: kto, jakie prawo, na jakiej tabeli. Pamiętaj, że REVOKE odbiera tylko wymienione uprawnienia, a reszta zostaje.

Kopie zapasowe i phpMyAdmin

• phpMyAdmin to aplikacja WWW do zarządzania MySQL/MariaDB, wbudowana w pakiet XAMPP. Pozwala tworzyć tabele, pisać zapytania, eksportować bazę do pliku .sql (kopia zapasowa) i importować ją z powrotem.
• Z wiersza poleceń kopię robi mysqldump -u root -p szkola > kopia.sql.
• Przed kopią warto sprawdzić spójność bazy. Kopię trzeba przechowywać poza serwerem i co jakiś czas sprawdzać, czy da się ją odtworzyć.

Jak strona trafia do przeglądarki. Systemy CMS

Ta lekcja porządkuje to, co dzieje się między serwerem a przeglądarką: protokoły, porty, domeny, podział na stronę klienta i serwera, a także systemy zarządzania treścią.

Klient i serwer

Typowy zestaw do uruchomienia strony z PHP to serwer WWW Apache + PHP + MySQL/MariaDB. Pakiet XAMPP instaluje je razem (plus phpMyAdmin), WAMP i LAMP to podobne zestawy na Windows i Linux. Inne serwery WWW: nginx, Microsoft IIS.

Protokoły i porty

W pliku konfiguracyjnym Apache httpd.conf linia Listen 80 ustawia port, na którym serwer nasłuchuje. Program do FTP to np. FileZilla: łączy się z serwerem (adres, login, hasło) i kopiuje pliki strony do katalogu publicznego (np. public_html, htdocs).

Adres strony

https://www.zstplock.pl:443/materialy/index.html?id=5#sekcja to: protokół, nazwa domeny (www to subdomena, .pl domena najwyższego poziomu), port, ścieżka do pliku, parametry zapytania (GET) i kotwica. Domenę kupuje się u rejestratora, a DNS kieruje ją na adres IP serwera hostingowego. Parkowanie domeny to skierowanie jej na tymczasową stronę, zanim powstanie właściwa.

Kody odpowiedzi HTTP

Ciasteczka i sesje

HTTP jest bezstanowy: serwer nie pamięta poprzednich żądań. Do zapamiętywania stanu służą ciasteczka (małe pliki tekstowe zapisane w przeglądarce, np. zapamiętanie głosu w ankiecie, wybranego języka, zawartości koszyka) i sesje (dane na serwerze, a w ciasteczku tylko ich identyfikator).

Systemy CMS

CMS (Content Management System, system zarządzania treścią) pozwala prowadzić stronę bez programowania. Treść przechowuje w bazie danych, a wygląd określa szablon (motyw). Przykłady: WordPress, Joomla!, Drupal, PrestaShop i Magento (sklepy). Apache, XAMPP, Flash czy Photoshop nie są systemami CMS.

Instalacja CMS: utwórz bazę danych i jej użytkownika, wgraj pliki na serwer (FTP), uruchom instalator w przeglądarce i podaj dane połączenia z bazą.

Bezpieczeństwo, prawo autorskie, dostępność i SEO

Kilka pytań w każdym arkuszu dotyczy ochrony strony i bazy, licencji oprogramowania, dostępności dla osób z niepełnosprawnościami, pozycjonowania i BHP przy komputerze.

Typowe ataki i obrona

• Haseł nie zapisuje się w bazie otwartym tekstem, tylko jako skrót (hash): w PHP password_hash() i password_verify(). Funkcje md5() i sha1() są dziś uważane za za słabe do haseł.
• Certyfikat SSL/TLS potwierdza tożsamość właściciela witryny i pozwala szyfrować połączenie (HTTPS, kłódka w pasku adresu).
• Ochrona serwera bazy: silne hasła, osobny użytkownik z najmniejszymi potrzebnymi uprawnieniami dla aplikacji, aktualizacje, zapora, kopie zapasowe. Defragmentacja dysku nie ma nic wspólnego z bezpieczeństwem.

Prawo autorskie i licencje

Autorskie prawa osobiste (np. do autorstwa) są bezterminowe i nie można ich przenieść. Prawa majątkowe (do zarabiania na utworze) można sprzedać, wygasają 70 lat po śmierci autora. Z cudzych zdjęć i czcionek na stronie wolno korzystać tylko zgodnie z ich licencją.

Dostępność (WCAG)

• Wytyczne WCAG opisują, jak tworzyć strony dostępne dla osób z niepełnosprawnościami (poziomy A, AA, AAA). Instytucje publiczne w Polsce muszą spełniać WCAG 2.1 na poziomie AA.
• Opisuj obrazy w alt, używaj nagłówków w kolejności i znaczników semantycznych, zapewnij kontrast tekstu do tła co najmniej 4,5:1 (dla dużego tekstu 3:1), obsługę klawiaturą i podpisy do filmów.
• Nie przekazuj informacji wyłącznie kolorem, podpisuj pola formularzy (<label>).

SEO, czyli pozycjonowanie

SEO to działania, które poprawiają pozycję strony w wynikach wyszukiwarki: trafny <title> i meta description, nagłówki h1–h6 ze słowami kluczowymi, przyjazne adresy, tekst alternatywny obrazów, szybkie ładowanie, wersja mobilna, linki z innych stron. Plik robots.txt mówi robotom, czego nie indeksować, a sitemap.xml wymienia podstrony do zaindeksowania.

BHP przy komputerze

• Górna krawędź ekranu na wysokości oczu lub nieco niżej, odległość 40–75 cm, ekran prostopadle do okna (bez odbić).
• Po każdej godzinie pracy przy monitorze co najmniej 5 minut przerwy wliczanej do czasu pracy.
• Szkolenie okresowe BHP pracowników inżynieryjno-technicznych powtarza się co 5 lat, a na stanowiskach administracyjno-biurowych co 6 lat.

Algorytmy, typy danych i systemy liczbowe

Pytania z tej części są ogólne: jak zapisać algorytm, co oblicza podany fragment kodu, jaki typ danych wybrać i jak przeliczać liczby między systemami.

Zapis algorytmu

Algorytm to skończony ciąg kroków prowadzący do rozwiązania. Zapisuje się go listą kroków, pseudokodem albo schematem blokowym:

Pętla w schemacie to romb, z którego strzałka wraca do wcześniejszego bloku. Aby znaleźć największą z trzech liczb, wystarczą dwa porównania (dwa bloki decyzyjne).

Jak czytać kod w pytaniu

Gdy pytanie pyta „co oblicza algorytm”, rozpisz w tabelce wartości zmiennych w kolejnych obrotach pętli. Typowe wzorce:

s = 0; for (i = 0; i < n; i++) s += t[i];          // suma elementów; s / n to średnia
s = 0; for (i = 0; i < n; i += 2) s += t[i];       // suma co drugiego elementu (indeksy parzyste)
m = t[0]; for (i = 1; i < n; i++) if (t[i] < m) m = t[i];   // minimum
if (x % 2 == 0) …                                  // liczba parzysta
while (n > 0) { s += n % 10; n = Math.floor(n / 10); }   // suma cyfr

Złożoność i klasyczne algorytmy

• Złożoność obliczeniowa mówi, jak rośnie liczba operacji z rozmiarem danych n. Szukanie minimum albo przejście tablicy: O(n). Wyszukiwanie binarne w posortowanej tablicy: O(log n). Sortowanie bąbelkowe i przez wybieranie: O(n²). Sortowanie szybkie i przez scalanie: średnio O(n log n).
• Wyszukiwanie liniowe sprawdza elementy po kolei. Binarne (połówkowe) dzieli posortowany zbiór na pół przy każdym kroku.
• Rekurencja to wywołanie funkcji przez samą siebie (np. silnia: n! = n · (n−1)!), musi mieć warunek zakończenia. Iteracja to powtarzanie w pętli.

Typy danych i języki

• Proste: całkowity (int, integer), zmiennoprzecinkowy (float, double, real – liczby z ułamkiem, np. 2.4), logiczny (bool: true/false), znakowy (char) i tekstowy (string).
• Złożone: tablica (elementy tego samego typu z indeksami), tablica asocjacyjna (klucz → wartość), struktura / rekord, klasa / obiekt.
• W programowaniu obiektowym: klasa to wzorzec, obiekt to jej egzemplarz, pola przechowują dane, metody to funkcje klasy. Modyfikatory dostępu: public (dostęp z zewnątrz), private (tylko w klasie), protected (w klasie i klasach pochodnych).
• Kompilator tłumaczy cały program na kod maszynowy przed uruchomieniem (C++, C#). Interpreter wykonuje kod linijka po linijce (PHP, JavaScript, Python).

Systemy liczbowe

• Dwójkowy → dziesiętny: dodaj potęgi dwójki tam, gdzie stoi 1. 1011₂ = 8 + 0 + 2 + 1 = 11.
• Dziesiętny → dwójkowy: dziel przez 2 i zapisuj reszty od końca. 13 → 1101₂.
• Dwójkowy ↔ szesnastkowy: każde 4 bity to jedna cyfra szesnastkowa. 1010 1111₂ = AF₁₆.
• System ósemkowy: każde 3 bity to jedna cyfra (0–7).

Bit to 0 lub 1, bajt to 8 bitów i przyjmuje 256 wartości (0–255). 1 KB = 1024 B (ściśle KiB; w układzie SI 1 kB = 1000 B). Kodowanie znaków: ASCII (7 bitów, 128 znaków, bez polskich liter), ISO-8859-2 i Windows-1250 (polskie znaki w 8 bitach), Unicode / UTF-8 (wszystkie alfabety, standard stron WWW).

Egzamin próbny i plan powtórki

Masz za sobą wszystkie działy. Teraz sprawdź się tak, jak na prawdziwym egzaminie: 40 losowych pytań z całej bazy, 60 minut, próg 50%.

Rozpocznij egzamin próbny →

Egzamin otworzy się w pełnej bazie pytań INF.03 (ponad 2600 pytań z objaśnieniami). Błędnie rozwiązane pytania trafią tam do zakładki „Do powtórki”.

Jak powtarzać

1. Rozwiąż egzamin próbny bez zaglądania do notatek.
2. Przy każdym błędzie przeczytaj objaśnienie i wróć do lekcji z tego działu.
3. Po kilku dniach przerób zakładkę „Do powtórki”, aż będzie pusta.
4. Powtórz egzamin. Celuj w 30+ punktów, a nie w 20, bo na egzaminie dochodzi stres.

Ściąga z najczęstszych pułapek